Box shadow without images

css3 box shadows

Generate shadow effects without images

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.

I came across a very old post in W3C box shadow mailing list, which can put some insight on this. I also just learned that a new “Drop shadow proposal” is being discussed at W3C.

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.