Clever Shadows: By using shadows to the(:before )and (:after) in pseudo-classes

Clever Shadows: By using shadows to the(:before )and (:after) in pseudo-classes, we can create shadow.

HTML:
 <div class="box">
 <img src="box.jpg" alt="clever" />
 </div>

Syntax: css

 .box:after { content: ‘ ‘;  position: absolute;
 z-index: -1; /* hide shadow behind image */
  /* The Shadow */
 -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
 -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);             
 width: 70%;
  left: 15%; /* one half of the remaining 30% (see width above) */
 height: 100px;
 }

Result: