css shadow wrapper

by shengoo

HTML

<div style="width:300px;background-color:gray;">
    <div class="shadow-wrapper">
        <div class="blog-head">
             <h3 class="top-mar"><a href="blog-single.html">Mauris Sagittis Vehicula</a></h3>

        </div>
        <div class="blog-txt">
            <div class="date-txt">03 <span>Nov</span>

            </div> <a href="#"><i class="icon-user"></i> Admin</a>, in <a href="#">Fashion</a>  <span><i class="icon-comment"></i> <a href="#">15</a></span>

        </div>
        <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at.</p>
        <p>Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
    </div>
</div>

CSS

/* ========= CSS3 Shadows =========== */
 .shadow-wrapper {
    position: relative;
    width: auto;
    padding:5px;
    background:#FFF;
    border:1px solid #FFF;
    margin:0 0 18px 0;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
/*.span12 .shadow-wrapper:before, .span12 .shadow-wrapper:after {
	bottom:15px;
}*/
 .shadow-wrapper:before, .shadow-wrapper:after {
    position: absolute;
    width: 40%;
    height: 10px;
    content:' ';
    left: 5px;
    bottom: 4px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 7px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 7px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 7px 5px rgba(0, 0, 0, 0.2);
    z-index: -1;
}
.shadow-wrapper:after {
    left: auto;
    right: 5px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}
/* ========= End =========== */