Then we see that the ninja was playing the guitar.

Archives

Credits/links

Here's an example of the drop shadow in action. The full CSS is listed below.

To my knowledge this technique works perfectly in IE6Win, Firefox/Mozilla, Opera, Netscape 6 (after a weird delay), Safari, Konquerer and even IE5Mac. IE5.5Win renders the border and shadow nicely but neglects the white backdrop (a lack of padding). IE5Win neglects the white backdrop and the shadow (a lack of everything).

These guys are cool; and by cool, I mean totally sweet.

Keep in mind that CSS background properties will always override the Alpha Filter, so your background needs to be clear in IE5.5 and IE6. Every other browser will ignore the filter, but it won't validate. Not sure if there's a easy fix for that.

The other interesting point to note is the 'sizingMethod=scale' part of the filter. Unlike CSS, the filter image can not be positioned relative to it's parent container (e.g. left/right/bottom/top etc), so what you're seeing in IE5.5 and IE6.0 is the PNG being scaled to squish into the available DIV space -- that explains it's darker appearance in those browsers.

You could certainly consider using a second, smaller PNG that is scaled closer to the actual size of your images. I haven't bothered.

.dropshadow{
float:left;
clear:left;
background: url(shadow-png.png) no-repeat bottom right !important;
/* respectful browsers (e.g. Firefox/Opera/Safari) ONLY take notice of this line*/
background: none;
/* disrespectful browsers clear the background graphic, in this case allowing the alpha filter to work in IE5.5 and 6 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='shadow-png.png'); /* the MS alpha filter */
margin: 10px 10px 10px 15px;
}
.dropshadow img{
position:relative;
bottom:6px;
right: 8px;
border: 1px solid #eee;
border-color: #eee #888 #666 #ddd;
background:#fff;
padding:8px 6px 15px 6px; /* gives us the white area - but not in IE5 + IE5.5 */
margin: 0px;
}