Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: DIVs and containers: Here

CSS Drop Shadows

Author: Dynamic Drive

This examples shows how to add a drop shadow to any container element using only CSS (no images). It does this by wrapping the desired content in a DIV with its background color set to the desired shadow color. The content itself is relatively positioned and shifted slightly upwards and to the left to expose the shadow. A "master" DIV that surrounds the entire markup is also relatively positioned, but shifted to the right and downwards to return the entire markup to its original position on the page. The result is a rather rigid- but instant- shadow.

IE 6 has difficultly handling nested relatively positioned elements (yada), so instead of letting IE6 ruin the fun for everyone else, we'll just use conditional HTML to hide the effect in that browser. IE7 is spared for finally learning proper CSS.

Note: If you're applying the shadow to an image, like in the second example below, you should give ".shadowcontainer" an explicit height reflecting that of the image's.

Demo:

Some title
Some text here. Some text here.
Some text here. Some text here.
Some text here. Some text here.
Some text here. Some text here.


The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive