:: CSS Drop Shadow Tests :: By Phil Baines ::

I've been very bad. I let this document remain offline for far too long, and now it probably isn't linked to anymore. However I did find some sites that still link to it, so I decided I better put it back. - Very sorry, Phil (Fri Sept 8th 2006)

Last Update: April 20th 2004

This set of tests are based on an article found on A List Apart. This version uses the same technique, but less CSS coding. This article will make more sense if you read that one first! I hope.

Drop shadow on an image

The first one here is not a test at all, but a picture of my little brother with a drop shadow applied. This is using the technique put forward in the above article. And as you see, it works a charm.

Dam! Don't you think my little bro is the cutest kid in the world?

Drop shadow on a block element?

Now. You would expect the same technique to work in the same way for block level elements wouldn't you? Well, they don't.

Sergio Villarreal came up with a cracking work around for this, using two background images. However I was quiet sure that this was not needed.

Fair enough Explorer has a bit of a problem with negative margins. It just so happens that I had to deal with this situation the other day.

The problem is that IE doesn't like block elements being moved to 'appear' outside another block element with negative margins. It will stop the inner element from going back further that the outer block element, and will force the outer block element to increase in width to compensate for the width of the inner block element.

So how did I work around it last time?

Position: Relative;

Yes, the workaround I have used in time before is to position the inner block element relatively. It then will appear to come out side the outer block element.

Let the code speak for it's self:

Check out the tests below;

Test 1
This has one wrap div and the border is applied to a paragraph. But this only allows for one paragraph.

Test 1 code 
<div class="dropshadow1">
<p><strong>Test 1</strong><br />
  This has one wrap div and the border is applied to a paragraph.</p>
</div>

.dropshadow1{
	float:left;
	clear:left;
	background: url(images/shadowAlpha.png) no-repeat bottom right !important;
	background: url(images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
	width: 500px;
}
.dropshadow1 p{
	position:relative;
	bottom:6px;
	right: 6px;
	border: 1px solid #999999;
	padding:4px;
	font-size:14px;
	margin: 0px;
}

Test 2

This has two wrapping div's. one for the shadow, and one for the border.

This allows for more than one paragraph, or any other type on content.

Notice that h4?

Test 2 code 
<div class="dropshadow2">
<div class="innerbox">
<h4>Test 2</h4>
  <p>This has two wrapping div's. one for the shadow, and one for the border.</p>
</div>
</div>

.dropshadow2{
	float:left;
	clear:left;
	background: url(images/shadowAlpha.png) no-repeat bottom right !important;
	background: url(images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
	width: 500px;
	padding: 0px;
}
.innerbox{
	position:relative;
	bottom:6px;
	right: 6px;
	border: 1px solid #999999;
	padding:4px;
	margin: 0px 0px 0px 0px;
}
.innerbox{
	/* IE5 hack */
	\margin: 0px 0px -3px 0px;
	ma\rgin:  0px 0px 0px 0px;
}
.innerbox p{		
	font-size:14px;
	margin: 3px;
}

By Phil Baines ::

Work: www.netring.co.uk

Play: www.wubbleyew.com

Updates

  • Tested in IE6 and Mozilla Firefox.
  • I have tested this in IE5 now also, and I did have to add I small IE hack for the .innerbox on test 2. Its a pain, but it works now.
    If anyone can explain IE5 problems with margins to me, I will be glad to listen.
  • It seems that dmxzone.com have re-published Sergio's article, and linked to this site also. Welcome to all DMXZone readers!