A shadow is a place where the light can not reach due to the object placed in its path, creating a two dimensional spot of the same shape as the object. Depending on the angle of the light source the shape of the shadow changes. A drop shadow usually rests at the bottom of the object.
Similar effect can be generated for HTML elements of a webpage by using CSS to create an User Interface, to create perspective & depth & drop shadows are the best possible solution. It can also be used for creating glow effects around the objects.
W3C decided to name this CSS property as Box shadow instead of Drop shadow, after a lot of rattling around the web, I still could not find why they named it as Box shadow. May you can comment on the post, to help me to find out the answer.
Box shadows or Drop shadows are also easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements are generated from an element and then pushed behind it.
Try out this CSS3 technique Drop-Shadows without images
There is this amazing experiment done with Box shadow CSS property. Try out Zurb’s Playground for CSS Box shadow.
W3C also proposing how to combine border image & box shadow.
Do visit back & let me know if you liked this post & be kind enough to comment as well.