Responsive Box

Responsive Centering Box

by Ahmad Najiullah

HTML

<div class="box css3-shadow">
<h4>Example 1</h4>
<p class="teks">Box-shadow css property is used to create the rounded drop shadow effect. Credit goes to <a href="http://www.paulund.co.uk/creating-different-css3-box-shadows-effects" target="_blank">Paulund.co.uk</a> for inspiration.<p></div>

CSS

div.box {
    width:70%;
    padding:20px;
    background:#fff;
    margin:20px auto 60px;
    border-radius:2px;
}
div.box h4{
    background:#eee;
    margin:0;
    padding:60px 20px;
    text-align:center;
    -webkit-box-shadow:0 0px 4px rgba(0, 0, 0, 0.2);
            box-shadow:0 0px 4px rgba(0, 0, 0, 0.2);
}
div.css3-shadow{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
/*==================================================
 * Drop shadow effect with box-shadow
 * ===============================================*/
div.css3-shadow:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
    box-shadow:0 0 40px rgba(0,0,0,0.8);
    bottom:0px;
    left:10%;
    right:10%;
    width:80%;
    height:50%;
    -moz-border-radius:100%;
    border-radius:100%;
}
.teks{padding-top:10px;}