Shadow CSS3

by Menkar Cantor

HTML

<div class="shadow shadow1">
    <h2>Raised Box</h2>
</div>
<div class="shadow shadow2 drop-shadow">
    <h2>Lifted Corners</h2>
</div>
<div class="shadow shadow3 drop-shadow">
    <h2>Lifted Left Corner</h2>
</div>
<div class="shadow shadow4 drop-shadow">
    <h2>Lifted Right Corner</h2>
</div>
<div class="shadow shadow5 drop-shadow">
    <h2>Box Lifted Raised</h2>
</div>
<div class="shadow shadow6 drop-shadow">
    <h2>Bottom Curve</h2>
</div>
<div class="shadow shadow7 drop-shadow">
    <h2>Horizontal Curves</h2>
</div>
<div class="shadow shadow8 drop-shadow">
    <h2>Vertical Curves</h2>
</div>
<div class="shadow shadow9 drop-shadow">
    <h2>Curled Corners</h2>
</div>
<div class="shadow shadow2 shadow10 drop-shadow">
    <h2>Rotated Box</h2>
</div>
<div class="shadow shadow11 drop-shadow">
    <h2>Perspective</h2>
</div>

CSS

body {
    background: lightgray;
    font-family: Helvetica, Sans, Arial;
}
.shadow {
	background: white;
    display: inline-block;
    float: left;
	margin: 15px;
	width: 44%;
}
.shadow h2 {
    color: #666;
	text-align: center;
	padding: 10px 0;
}
.drop-shadow {
   position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, 
.drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -2;
}


/* Shadow 1 */
.shadow1 {
	-webkit-box-shadow: 0 10px 6px -6px #999;
	   -moz-box-shadow: 0 10px 6px -6px #999;
	        box-shadow: 0 10px 6px -6px #999;
}

/* Shadow 2 */
.shadow2:before, 
.shadow2:after {
  background: #666;
  bottom: 15px;
  left: 10px;
  max-width: 300px;
  top: 80%;
  width: 50%;
  -webkit-box-shadow: 0 15px 10px #333;
     -moz-box-shadow: 0 15px 10px #333;
          box-shadow: 0 15px 10px #333;
  -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
       -o-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
.shadow2:after {
  left: auto;
  right: 10px;
  -webkit-transform: rotate(3deg);
     -moz-transform: rotate(3deg);
       -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
          transform: rotate(3deg);
}

/* Shadow 3 */
.shadow3:before {
  background: #666;
  bottom: 15px;
  left: 10px;
  max-width: 300px;
  top: 80%;
  width: 50%;
  -webkit-box-shadow: 0 15px 10px #333;
     -moz-box-shadow: 0 15px 10px #333;
          box-shadow: 0 15px 10px #333;
  -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
       -o-transform: rotate(-3deg);
          transform: rotate(-3deg);
}

/* Shadow 4 */
.shadow4:after {
  background: #666;
  bottom: 15px;
 ...