CSS3 - Adding Shadows To Boxes

With CSS 3 you can not only add shadows to text, you can also add shadows to the boxes that are drawn around some parts of your page content. This is done using the box-shadow property. This property has six values some of which are optional and some of which are mandatory.

You can supply multiple shadows on the same box using a comma separated list.

Examples

.shadow {box-shadow: 4px 4px 3px #000;} 

Limitations

All modern browsers implement this property although some still require their proprietary prefix to be used in order for them to apply it. Some older browsers do not recognise the spread value.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate