<link href='https://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<div class="lift"></div>
* {
height: 100%;
}
.lift {
background: #fafbf1;
border-radius: 1px;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
-mox-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
color: #898989;
height: 150px;
font-family: "Patrick Hand SC";
font-size: 24px;
margin: 0 auto; /*center the div*/
margin-top: -99px; /*center the div*/
padding: 1em;
position: relative;
top: 45%; /*center the div*/
width: 400px;
}
.lift:before, .lift:after {
bottom: 16px;
box-shadow: -14px 15px 5px rgba(0, 0, 0, 0.4);
content: "";
height: 50px;
max-width: 60%;
position: absolute;
width: 60%;
z-index: -1;
}
.lift:after {
bottom: 14px;
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
left: auto;
right: 1px;
transform: skew(3deg, 2deg);
-webkit-transform: skew(3deg, 2deg);
-moz-transform: skew(3deg, 2deg);
-o-transform: skew(3deg, 2deg);
}
/*CSS Corner Shadow*/
/*References:
http://www.readitsideways.com/css3_demos/shadows/
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.