Perspective CSS3 Shadow

by kaikemono

HTML

<div id="shadow">
    <img src="http://placekitten.com/g/400/250" />
</div>

CSS

/* http://www.iinterest.net/2011/04/21/css3-box-shadow/ */

body {
    background-color: #f2f4f7;
}


#shadow {
    background: #fafafa;
    border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px;
    box-shadow: 0px 0px 3px rgba(000,000,000,0.2); -moz-box-shadow: 0px 0px 3px rgba(000,000,000,0.2); -webkit-box-shadow: 0px 0px 3px rgba(000,000,000,0.2);
    color: rgba(0000,000,000,0.8);
    display: inline-block;
    margin: 50px;
    padding: 20px;
    position: relative;
    text-shadow: rgb(255,255,255) 0 1px 0;
}

#shadow::before,
#shadow::after {
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(000,000,000,0.5); -moz-box-shadow: 0 15px 10px rgba(000,000,000,0.5); -webkit-box-shadow: 0 15px 10px rgba(000,000,000,0.5);
    content: "";
    left: 10px;
    position: absolute;
    top: 10px;
    width: 50%;
    z-index: -1;
    transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -webkit-transform: rotate(-3deg);        
}

#shadow::after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -webkit-transform: rotate(3deg);    
}

#shadow img {
    vertical-align: bottom;
}