Elliptical rounded dropshadow
Elliptical rounded dropshadow beneath box, done with CSS3 and pseudo elements.
Thoroughly untested.
HTML
<div><img src="http://placekitten.com/300/150" alt="Kittens!" /></div>
CSS
body {
background:#f9f9f9;
padding:30px;
}
div {
width:300px;
margin:0 auto;
}
img {
display:block;
box-shadow:0 0 13px rgba(0,0,0,0.1);
width:100%;
height:auto;
}
div:after {
content:".";
display:block;
text-indent:100%;
overflow:hidden;
width:75%;
height:10px;
margin:-10px auto 0;
box-shadow:0 0 15px 5px rgba(0,0,0,0.3);
border-radius:75%;
}
JavaScript
/*
Elliptical rounded dropshadow beneath box, done with CSS3 and pseudo elements.
Thoroughly untested, but seems to work (without prefixes!) in Chrome 19, FF13 & IE9.
*/