<div class="wrap shadow-bottom ">
<h1>Sample Box</h1>
<img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.
</p>
<br />
<a href="http://www.designshock.com/"> DesignShock.com </a>
</div>
body {
background: #DEF;
background: -moz-linear-gradient(45deg, #EFF, #DEF);
background: -ms-linear-gradient(45deg, #EFF, #DEF);
background: -webkit-linear-gradient(45deg, #EFF, #DEF);
background: linear-gradient(45deg, #EFF, #DEF);
min-height: 100%;
font-size: 11px;
font-family: 'Open Sans', sans-serif;
color: #4A4A4A ;
text-align: center;
}
.wrap {
background: #FFFFFF;
background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
background: linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
border: 1px solid #777777;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
margin: 20px auto;
padding: 12px;
position: relative;
width: 300px;
height:310px;
}
.wrap :before, .wrap :after {
background: none;
bottom: 12px;
-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
content: "";
height: 10px;
left: 12px;
position: absolute;
width: 40%;
z-index: -1;
-moz-transform: skew(-4deg) rotate(-4deg);
-webkit-transform: skew(-4deg) rotate(-4deg);
transform: skew(-4deg) rotate(-4deg);
}
.wrap :after {
-moz-transform: skew(4deg) rotate(4deg);
-webkit-transform: skew(4deg) rotate(4deg);
transform: skew(4deg) rotate(4deg);
left: auto;
right: 12px;
}
.shadow-bottom:before, .shadow-bottom:after {
top: auto;
bottom: 12px;
-moz-box-shadow: 0 10px 14px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 14px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 14px 12px rgba(0, 0, 0, 0.5);
}
.wrap img {
width: 100%;
margin-top: 15px;
}
p{
margin-top: 15px;
text-align: justify;
}
h1{
font-size: 20px;
font-weight: bold;
margin-top: 5px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a{
text-decoration: none;
color: #4A4A4A !important;
}
a:hover{
text-decoration: underline;
color: #6B6B6B !important ;
}