Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: DIVs and containers: Here

CSS Image Drop Shadows

This examples shows how to add a drop shadow to any container element using CSS and the help of a large shadow image in the background. Virtually identical to the technique used to create a plain CSS shadow, the desired content is wrapped in a DIV with its background image set to an oversized shadow image. 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 it's original position on the page.

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 image used (resized for easier download):

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/04/2006

Revision History: None

Usage Terms: Click here

Your Comments (21)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 3 pages  1 2 3 >

While it works on Firefox.

Its just not displaying the shadow in IE6. Do you have a fix for that???
Posted by gingerkid on 06/21, 07:40 AM
.shiftcontainer{
The { needs to be moved over to the right to work in IE6.
Like this
.shiftcontainer {
.shadowcontainer {
.shadowcontainer .innerdiv {
Hope this helps.
Posted by fordlady on 06/25, 03:48 PM
couldn't understand the hack for IE. Can you explain it again?
Posted by Aline on 08/10, 06:49 AM
.shiftcontainer{ (not like this)
{ needs to be moved one space over to the right to work in IE6.
Like this
.shiftcontainer {
Posted by Fordlady on 08/10, 08:56 AM
Well I too cant see it in IE.. and can you make the corners rounded if possible.. becuase I am looking for something very similar but should be round cornered
Posted by SEO Tips on 09/20, 01:04 PM
For a nice rounded corner solution check out this website: http://www.modxcms.com/simple-rounded-corner-css-boxes.html
Posted by Adsense Websites on 09/25, 04:15 PM
nice and easy to use. someone please show round corners with drop shadow.
Posted by Richard S on 12/29, 07:12 PM
simple, clear but useful
Posted by peter on 01/03, 10:35 PM
thanks.
i use this on our organization website, the cfc youth for christ in the philippines.

more power
Posted by cfc youth for christ on 03/22, 10:02 PM
very nicely done. any way to use an image as the background shadow?
Posted by eMarketingPapers on 04/09, 07:42 PM

Comment Pages 1 of 3 pages  1 2 3 >


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.