Double elliptical rounded dropshadow

Elliptical rounded dropshadow beneath box, done with CSS3 and pseudo elements. Thoroughly untested.

by laustdeleuran

HTML

<div><img src="http://placekitten.com/g/300/200" alt="Kittens!" /></div>

CSS

body {
    background:#f9f9f9;
    padding:30px;
}
div {
    width:300px;
    margin:0 auto;
    position:relative;
}
img {
    display:block;
    box-shadow:0 0 13px rgba(0,0,0,0.1);
    width:100%;
    height:auto;
    position:relative;
    z-index:2;
    opacity:0.5;
}
div:before,
div:after {
    content:".";
    display:block;
    text-indent:100%;
    overflow:hidden;
    width:50%;
    height:20px;
    border-width:10px;
    margin:-22px 0 0 10px;
    
    position:relative;
    z-index:1;

    box-shadow:0 0 5px 5px rgba(0,0,0,0.15), 0 0 10px 10px rgba(0,0,0,0.15);

    border-radius:100% 0 100% 0%;
}
div:before {
    position:absolute;
    bottom:0;
    right:10px;
    
    border-radius:0 100% 0% 100%;
}

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.
*/