Posted by on 10/19/2010
Ever wanted a drop shadow like on your HTML using CSS? CSS3 now provide an a new feature called box-shadow which basically places a drop shadow like border on your HTML.

Here is an example

box-shadow: 10px 10px 5px #888;


The property takes 3 lengths and a color as it’s attributes, the lengths are:

   1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
   2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
   3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

So far this is applied on browsers that supports CSS3 capabilities.