I've been working on a site that'll be launching in the new year that contains its share of contemporary web technologies (look, roll your eyes if you want but I managed to avoid the W2 word); it also has its fair share of subtle drop shadows which have to work over a stripy background.
Initially I figured that this wasn't possible but after being prodded in the right direction by the designer it turns out that it is by using PNGs with alpha transparency. To be fair initially I'd discounted this as an option due to *spit* IE6 and it's lack of support for them.
WRONG Mr Beale
As it is there is a way to display PNGs with alpha transparency in IE6, which is ironic now that IE7 has been released (which supports this out-of-the-box).
Anyway, I found it so useful that I figured it would'nt hurt to post about it.
1) Make a PNG with alpha transparency: Initially I was following these instructions for creating them in Photoshop which whilst a lengthy process, does work. However after a 2 min chat with same designer (pint = owed++) I was using Image Ready to export slices of items with the drop shadow effect applied, background disabled and PNG24 with transparency ticked under the 'optimise' tab. A tad quicker to implement (and much more consistent)
2) Make HTML/CSS work:
Take some dirty, non-semantic and unpure (but working) mark-up to make a vertically stretchy box with a shadow down the right and across the bottom. It's made by three background slices: top bit (so the shadow doesn't cut a straight line across the top corner, instead it fades in), middle repeating bit and bottom shadow bit:
[html]
[/html]
Matching CSS:
[css]#defaultContentHolder {
width: 603px;
float: left;
}
#defaultContentTop {
background: url(/images/frontend/background/defaultContentTop.png) top right no-repeat;
width: 603px;
height: 32px;
}
#defaultContentMiddle {
background: url(/images/frontend/background/defaultContentMiddle.png) top right repeat-y;
width: 603px;
}
#defaultContent {
width: 550px;
padding: 20px 20px 20px 20px;
position: relative;
top: -30px;
}
#defaultContentBottom {
background: url(/images/frontend/background/defaultContentBottom.png) top right no-repeat;
width: 603px;
height: 10px;
}[/css]
3) Add the IE6 support
a) create an IE6 stylesheet which contains references to the totally proprietary AlphaImageLoader Filter
[css]#defaultContentTop {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/frontend/background/defaultContentTop.png', sizingMethod='scale');
}
#defaultContentMiddle {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/frontend/background/defaultContentMiddle.png', sizingMethod='scale');
}
#defaultContentBottom {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/frontend/background/defaultContentBottom.png', sizingMethod='scale');
}[/css]
b) Include the stylesheet but only for browsers less than IE7. Using the following method we can achieve just that AND our code will still validate, which is obviously a pre-requisite.
[html]
[/html]
Has to be said that I'm still looking for the catch, but I can't find one. It Just Works.