CSS3 Lifted Corner Shadows

Created for: http://stackoverflow.com/questions/10541315/best-way-to-do-this-kind-of-drop-shadow/10541430#10541430

HTML

<div class="drop-shadow lifted">
    <img src="http://www.robertodemicheli.com/album_test/Italian%20Views/Mountains/slides/IMG_5633P.jpg" alt="" />
</div>

CSS

/* some presentation styles */
 body {
    padding:20px 0 30px;
    font:14px/1.5 Arial, sans-serif;
    text-align:center;
    color:#333;
    background:#FAF0D9;
}
img{
    opacity: 0;
    height:300px;
    width: 600px;
}
.drop-shadow {
    position:relative;
    float:left;
    width:600px;
    height:300px;
    opacity:0.5;
    margin:2em 4em;
    background:#fff;
}
.drop-shadow:before, .drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}
/* Lifted corners */
 .lifted:before, .lifted:after {
    bottom:15px;
    width:50%;
    height:5%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
}
.lifted:before {
    left:5px;
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.lifted:after {
    right:5px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}