Dynamic Drive CSS Library- CSS Drop Shadows

CSS Library

CSS Layouts

Web Graphics

Free 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:

<!-- Hide entire CSS code from IE6 -->
<![if !IE 6]>

<style type="text/css">

.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 300px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}

</style>

<![endif]>

The HTML:

<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Some text here. Some text here.<br />
Some text here. Some text here.<br />
Some text here. Some text here.<br />
Some text here. Some text here.
</div>
</div>
</div>

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

Thanks for the script, I've used it for a client and they were very impressed...

Posted by cedric turbet on 08/21, 03:07 PM

Under IE6 it is not working ... Great sucker code!

Posted by shit on 09/12, 07:20 AM

This works quite well, shame about IE6

Posted by Promo ski on 09/20, 07:37 AM

I get CSS errors in Firefox. An example would be "<![if !IE 6]>". Does anyone else get these errors? Just curious.

-Great script

i found that putting a space in the trailing ENDIF code to make it END IF fixed the problem

Posted by kevin on 10/11, 09:12 AM

I added this code but then my divs content won't center. what to do?

Posted by Brian on 01/09, 03:40 PM

My layout was centered...I added this and works but pushes my layout far left...cant seem to get it back centered.

Here's my code...HTML:
<body >
<div class="center">
<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
<div id="wrap">

CSS:
#wrap {
width:800px;
text-align:left;
margin:0 auto;
background-color:white;
}

And yes Im a newbie need all the help I can get. Any ideas. Thanks in advance.

Posted by LP on 04/17, 02:25 AM

Hey guys, it does not work in IE 6.0. When I open it in Mozzilaa browser, it worked fine. This does nto seem cros broser compatible.

Posted by Anjelina on 04/23, 10:51 PM

Wow, great help. I was looking for it and here you go. I got it. Thanks a lot.
http://theclickdepot.com

Posted by Jennifer on 07/16, 06:00 AM

I use IE6 and it doesn't seem to work. I read the text up there ^^ and it looks like the IE6 bug wasn't fixed yet :/
Anyway, nice effect :)

Posted by Remarque on 11/07, 08:33 AM

That's really good DD, cheers for sharing

Posted by Fredheim_Holm on 11/24, 08:00 AM

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

Commenting is not available in this weblog entry.