css shadows

by jpeter06

HTML

<div class="curl_cont">
    <div class="curl white">
       
    </div>
</div>

<div class="curl_cont half left">
    <div class="curl green">
       
    </div>
</div>
<div class="curl_cont third left rot6">
    <div class="curl blue">
       
    </div>
</div>

<div class="curl_cont third left">
    <div class="curl red">
       
    </div>
</div>

<div class="curl_cont third  left">
    <div class="curl orange">
       
    </div>
</div>

<div class="curl_cont third  left">
    <div class="curl turq">
       
    </div>
</div>

CSS

.curl_cont {
padding-bottom: 20px;
z-index: 1;
position: relative;
 overflow:hidden;
}

.curl {
    position:relative;
    min-height:80px;
    padding:10px;
    margin:0px 2px 15px 2px;
    background:#fff;
    -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1);
}

.curl:before,
.curl:after { 
    content:''; 
    position:absolute; 
    z-index:-1; 
    width:70%;
    max-width:200px; /* for liquid versions */
    height:50%; 
    bottom:11px;
    left: 10px; 
    -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); 
       -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); 
            box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); 
    -webkit-transform:skew(-15deg) rotate(-6deg); 
       -moz-transform:skew(-15deg) rotate(-6deg); 
            transform:skew(-15deg) rotate(-6deg);
} 

.curl:after {
    left:auto;
    right: 10px; 
    -webkit-transform:skew(15deg) rotate(6deg);
       -moz-transform:skew(15deg) rotate(6deg);
            transform:skew(15deg) rotate(6deg);
}

.white{    background-color:white;}
.red{    background-color:red;}
.green{    background-color:green;}
.orange{    background-color:orange;}
.turq{ background-color:turquoise;}
.blue{ background-color:blue;}

.left{ float:left;}

.rot6{
        -webkit-transform: rotate(6deg); 
       -moz-transform: rotate(6deg); 
            transform: rotate(6deg);
}

.half{
    width:49%;
}

.third{
    width:30%;
}