Dynamic Drive CSS Library- CSS Drop Shadows

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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 5 pages < 1 2 3 4 > Last »

It looks ok, but the shadow would look better if it was a gradient. This script can cause a very powerful effect though.

Posted by Pozycjonowanie on 11/03, 01:09 PM

nice effect but whats the difference between this and the other shadowed effect one?

Posted by free tv on 11/12, 05:37 PM

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

Enjoyed browsing through the

site. Keep up the good work. Greetings from Poland

Posted by Pozycjonowanie on 12/05, 09:31 AM

Yes, this script is very useful. It eliminates photoshop work and loogs good too. :)

Thanks for posting this.

Posted by Fotografie on 12/25, 04:50 PM

Yay, this code looks sweet. I have one question tho: how to make shadow more realistic, i mean - smooth edges?

Posted by Fotografie on 02/20, 12:53 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

Thank I have use full me....

Posted by livegujarat on 05/08, 07:03 AM

Comment Pages 2 of 5 pages < 1 2 3 4 > Last »