+
1
|
list
|
skin
|
login
|
editor
α-wwwiki
::
lifted_corners_2
user:none
(2657 bytes)
_h3 lifted corners 2 (see [[lifted_corners]]) _p A very smart one from [[cjwainwright.co.uk|http://cjwainwright.co.uk/webdev/liftedcorners/]]. _p Click on "include someCSS" to see something ... {input {@ type="submit" value="include someCSS" onclick="°° var css = document.createElement('style'); css.innerHTML = getId('styles').innerHTML; document.head.appendChild( css ); this.value = 'OK, someCSS is included !'; this.disabled='disabled'; °°"}} {div {@ style="-moz-transform:rotate(-2deg); -webkit-transform:rotate(-2deg); -o-transform:rotate(-2deg);"} {div {@ class="box lifted-corners"} {img {@ src="data/farnsworth_view.jpg" width=100%" title="Farnworth"}} Look, it's a box that looks like it's got lifted corners! It's all an illusion though, it's just the shadow that's curved. }} {div {@ style="-moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg); margin-top:-300px; margin-left:100px;"} {div {@ class="box lifted-corners"} {img {@ src="data/farnsworth_view.jpg" width=100%" title="Farnworth"}} Look, it's a box that looks like it's got lifted corners! It's all an illusion though, it's just the shadow that's curved. }} _h3 code {pre °° {div {@ style="-moz-transform:rotate(-2deg); -webkit-transform:rotate(-2deg); -o-transform:rotate(-2deg);"} {div {@ class="box lifted-corners"} {img {@ src="data/farnsworth_view.jpg" width=100%" title="Farnworth"}} Look, it's a box that looks like it's got lifted corners! It's all an illusion though, it's just the shadow that's curved. }} °°} _h3 CSS rules {pre {@ id="styles" style="white-space:pre-wrap;"}°° .box { padding: 10px; border: solid 1px #555; background-color: #eed; width: 400px; margin:20px auto; border-radius:5px; text-align:center; } .lifted-corners { box-shadow: 0px 10px 8px rgba(0,0,0,0.8); position: relative; } .lifted-corners:after { content: ""; position: absolute; width: 100%; height: 20px; bottom: -20px; left: 0px; background-image: -moz-radial-gradient( center bottom, ellipse farthest-side, rgb(250, 250, 250) 80%, rgba(250, 250, 250, 0) 100%); background-image: -webkit-radial-gradient( center bottom, ellipse farthest-side, rgb(250, 250, 250) 80%, rgba(250, 250, 250, 0) 100%); background-image: -o-radial-gradient( center bottom, ellipse farthest-side, rgb(250, 250, 250) 80%, rgba(250, 250, 250, 0) 100%); } °°}