Box Shadows
With the
box-shadow property we can add shadows to elements! The values for box-shadow are identical to the values for text-shadow, with the addition of inset.
In Action
h3 {box-shadow: 3px 3px 5px #606361;}Again, the first value is the horizontal axis, the second value is the vertical axis, the third value is the blur and the last value is the shadow color.
h3 {box-shadow: 0px 0px 5px #000000 inset;}
Inset makes the shadow display as inside the element instead of underneath. It needs to be the last value.
Inset Shadows and Images
Inset shadows cannot be used on image elements - the image displays on top of the shadow. To use an inset shadow over an image, an element with a transparent background must be positioned to overlap the image. That transparent element can have an inset shadow.
<figure class="overlap">
<img src="images/sprite.gif" style="width:150px; alt="missing" title="sprite">
<span class="addinset"></span>
</figure>
.overlap {position: relative;} (this allows the shadow to be positioned properly; also make sure the width and height of figure/container is the same as the image )
.addinset {position: absolute; width:100%; height:100%; box-shadow: 0 0 10px black inset; top:0; left:0;}