Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

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 (35)

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 2 of 4 pages  <  1 2 3 4 >

As a result, I can't use it in index.css. Further, to place all new code in each separate instance creates file management issues.
Greetings
Posted by Pozycjonowanie on 11/17, 12:07 PM
simple method for simple result. i need to modify it for better result. btw, thanks for the idea.
Posted by peter on 11/17, 09:17 PM
How come it works for me but it says if ie6 and i have ff
Posted by yoshi555 on 02/22, 05:02 PM
I use CuteNews, and I just added this to put around my comments, it looks really neat!
Posted by Anna on 03/24, 10:49 AM
I am struggling here. Is this code to put a shadow down both sides of the main page, because that's what I want.
Posted by Ironside on 05/15, 01:55 PM
It can be usefull to validate the page code. Thanks for your article, and i wish it will be not the last artcile.

I wish more ....
Posted by Opel on 05/20, 03:04 PM
Excellent tool. easy to use :)
Posted by Shaon on 06/05, 12:54 PM
Can somebody please tell me, if this code works with Mozilla Firefox. It isn't working for me here :(
Posted by Deepti on 06/18, 04:26 AM
why not use background ?
maybe all is right
Posted by zen on 07/07, 10:12 PM
How do you put two together side by side..
i was looking a way to do that and i could dont do it it with css, so i used html tables to put them side by side. table tr td BOX /td td BOX /td /tr /table.
Posted by gimi on 07/23, 01:02 AM

Comment Pages 2 of 4 pages  <  1 2 3 4 >


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