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; ”/>
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.
About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke