To add a shadow to a box using CSS 3 using the box-shadow property

One of the best features of CSS 3 is box-shadow that allows you to add shadow to any element. The property is at present implemented only in Safari 3 onwards and Firefox 3.5 onwards.

An example of the output generated by this property is shown below:

Isn’t it spectacular? And this is possible with a single property; ‘box-shadow’.

The property takes 3 integers and a color attribute.

1. Horizontal offset of the shadow; a positive value will place the shadow on the right of the box, a negative value will place the shadow on the left of the box.

2. Vertical offset; a positive value will put the shadow below the box and a negative value will put the box-shadow on top of the box.

3. Blur radius; beginning from 0 (sharp shadow), the higher the number, more blurred it will be.

4. Value for color.

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

NOTE: To add a shadow to the box with rounded corners, use the border-radius property in addition to the box-shadow property.

To get the same effect as shown in the image above, use this code.

<div style="-webkit-box-shadow: 10px 10px 10px #888; padding: 5px 5px 5px 10px; background-color: black; width:130px;">

<img src="../ maroon_leaves.jpg" alt=”Leaves; ”/>

</div>

NOTE: The box-shadow property is prefixed with -webkit- in Safari and -moz- in Firefox. That is because, most browsers support custom CSS tags that are not yet part of any standard. So they are prefixed with the browser name.

But the box-shadow property is still not supported in Internet Explorer and other browsers. To get a similar effect (without using images as shadow) is not possible (or it is something that I am not aware of!) In my next article, I will show you a way to create shadow effect for box without using images.