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.