Dynamic Drive CSS Library- CSS Image Drop Shadows

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

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

True dimensions- 973px by 969px

The CSS:

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

<style type="text/css">

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

.shadowcontainer{
width: 300px; /* container width*/
background: transparent url(media/bigshadow.gif) no-repeat bottom right;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -7px; /*shadow depth*/
top: -7px; /*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>
<br /><br />

<div class="shiftcontainer2">
<div class="shadowcontainer2">
<img class="innerdiv" src="media/uplift.jpg" width="151px" height="113px" />
</div>
</div>

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

Um I think you'll find it says:
<![if !IE 6]>
and above the comment:

which means:
***This isn't supposed to work in IE6***

So I don't know why people are asking...Read the code you are copying please.

Posted by secoif on 05/22, 11:50 PM

Internet Explorer is the only browser that assumes what a code means and forms around it rather then showing what the code wants to display.

This is the reason for different looking pages with different browsers.

People now need to write a completely new source in their pages for Ie as well as one for the others.

The suggestion? - Remove the out dated and neolithic IE and try Firefox. You wont regret it

Dont just take my word for it , here is a site for you to read. - http://www.yourhtmlsource.com/starthere/browserreview.html

Posted by Kn0t on 07/16, 05:56 PM

very nice, gonna use it on my website :), thanx a lot it helped a lot

Posted by Mig on 01/14, 03:16 PM

Its just not displaying the shadow in IE6...

Posted by Forumistan on 03/13, 05:23 PM

Ehy guys, is simple... all work! he has only forgotten to put also the "shiftcontainer2" on the CSS of the example, u can read this on the css of this page ;)

Great job and great site! Thnks! :)

Posted by Dany on 03/14, 09:36 AM

Guys,
in the example he has forgotten only to put "shadowcontainer2" on the CSS of the example, u can find it on the css section of this page!
For the second shadow of the tree immage.

Great job and great site Thnks!!

Posted by Dany on 03/14, 09:41 AM

How can I put this code to my css file? When I put this cod to html shadow was shown but when I put css code to css file nothing hepend.

sorry for my english

Posted by Artur on 06/06, 07:21 AM

Yet again Internet Explorer shows how compatible it is with code, by yet again not working with a good piece of code. Thanks for the great code

Posted by Mike on 06/24, 05:38 PM

hi this is worked fine, Thanks ;-)

Posted by Gautam kumar on 07/13, 01:39 AM

Awesome implementation. Thats for taking the time to post it for the rest of us.

Posted by Nick Slater on 08/28, 02:17 PM

Comment Pages 2 of 3 pages < 1 2 3 >

Commenting is not available in this weblog entry.