Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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

This is a great script, but there is an error in the conditional comments which means that IE displays the <![endif]> on-screen and IE6 does not display any content.

Instead of:

<style type="text/css">
<![if !IE 6]>

It needs to be:

<![if !IE 6]>
<style type="text/css">

The endif is in the right place.
Posted by Oliver on 12/21, 05:34 AM
As a designer first, then a cd-rom programmer, now a web designer for over 12 years, I still am persnickety with my design, and if it looks like a colorized box around a picture... then that's exactly what it is. It's cool that you can do it with CSS, but it doesn't by any means look realistic. I don't think it's possible unless you can add a feathered (gradient) edge, and then I know you can set the transparency. That would look real. This doesn't. It's good code, however, and will work well in combination with the transparency setting. I'd make the fill color a dark gray, or black, then set the transparency to 50% or something, to make it realistic.
Posted by Tim Zuellig on 04/07, 06:57 PM
Can some1 please tell me what I must name the CSS file when saving..thx
Posted by John_71 on 04/18, 11:05 PM
It's not working for me in IE :( . Pls advice me.
Posted by Shaon on 05/05, 07:32 PM
How do you change the width?
Posted by Nederlander on 06/09, 09:39 AM

Comment Pages 4 of 4 pages « First  <  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.