[CSS] Multi-purpose Drop Shadow Border

[wattersisere]

1) CODE TITLE: Multi-purpose Drop Shadow Border

2) AUTHOR NAME/NOTES: Wattersisere

3) DESCRIPTION: A CSS script to add a bottom and right drop down shadow to a box. This box's width needs to be in-putted into the CSS, but the height can vary from one page to the next. It uses 5 images, all of which are 8px by 8px (2 of these though could be changed to 1px by 8px). It is ideal to add a shadow to the main content area of a web page. It also includes the clearfix class method to help with the floated elements.

4) URL TO CODE: http://www.wattersisere.co.uk/web/drop-shadow/

[jscheuer1]

Looks nice. I could be wrong, but the effect should be easier to achieve. In any case, don't use .bmp for this. For example, your b_shadow.bmp is 246 bytes. An identical .gif image can be had at 73 bytes.

Now, I know that you could also further reduce the byte size by making it narrower (as you imply). But, from my experience, this often can increase the rendering time required due to some quirk in at least some browsers.

Here are all of the images in .gif format:

Attachment 1348

[jscheuer1]

Two other things I just noticed:

body {font:1em verdana, arial, sans-serif; behavior:url(csshover.htc);}

font-size 1em is basically meaningless, especially for the body selector. It can even cause problems in IE if other font-size declarations are made in em's for other selectors. If you must declare it, it is safe to use 100% which means the same thing.

csshover.htc is a file not found 404 error. The behavior property is IE proprietary and requires Active X components enabled. It will therefore pop a security warning for most users testing locally in IE. Best to avoid this if possible. Since the csshover.htc is missing, it can't be that important, right? I'm thinking that declaration was left over from a previous version.

[djr33]

Wouldn't .pngs make more sense, so that you can have it over some other element, rather than it needing to be over white?

[jscheuer1]

Wouldn't .pngs make more sense, so that you can have it over some other element, rather than it needing to be over white?

I think that .png could be fairly problematical in IE 6, and 5.5. It could be worked out, but would really bloat things up. And .png images would be slightly larger for this, and perhaps completely unsupported in some legacy (IE 5 Mac for one) browsers while this is obviously designed to include as many old as well as new browsers as possible. You can always make your own colored .gif corners.

I've used a rounded corners css thing for awhile. It uses single layer transparency and one color matching. These are really easy to change for different backgrounds as it is a one color palette edit. For these, it would be a bit more work.

[djr33]

Trouble is that a shadow must be projected onto something, not just displayed around it. It's much more fundamental than a rounded corner which is just a nice bonus, where the shadow having white edges would have a significant bad effect on the page around it.

Using PNGs would perhaps cause trouble in that their transparency would not be supported, but it would be no worse than the current .bmp, or gif methods.

I'm not sure about IE 5 for mac, but that's really getting phased out now. New macs aren't shipping with it any more and almost everyone is moving toward Firefox or at least Safari.

IE 5 for mac was a big browser for OS9, but replaced slowly by Safari on OSX and I don't even have it on here (macbook pro).

[jscheuer1]

Using PNGs would perhaps cause trouble in that their transparency would not be supported, but it would be no worse than the current .bmp, or gif methods.

Much worse, actually. It is the difference between needing to tweak the images in an editor (.gif method) and having it not work at all (.png method). Bmp's are out of the question in my opinion - rarely suitable for any web publishing project.

.png template images would be very useful as an aid for easily creating .gif images that could show in front of any color background.

[djr33]

Do pngs not work in IE6? I thought they just had transparency issues if the workaround wasn't used.

[jscheuer1]

Well, I got bored, so I made up some .png images for it. I'm personally not attached to it working in IE Mac. However, even in IE 5.5 and 6, using the background image model is probably not going to work out too well. You need to use the alpha image loader filter. It might work out though, experimenting with that will probably have to wait for another time, at least for me.

Attachment 1349

[jscheuer1]

I recalled a much easier way to make it 'retroactive' to IE 5.5 & 6 PC. The filter:shadow -

Just add this in after the main style block:

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<style type="text/css">
#br_shadow, #b_shadow, #tr_shadow, #bl_shadow, #r_shadow {
background-image:none;
}
#inside {
filter:progid:DXImageTransform.Microsoft.Shadow(strength=7,color=#636363,direction=135);
position:relative;
}
</style>
<![endif]>
<![endif]-->

Filters screw up text in IE 7, so I'm excluding it from this. IE 7 handles the .png alpha channel opacity just fine.

BTW, the demo page from the original post in this thread didn't work in IE 6 anyway, even with the BMP's and wattersisere's original css. The alignment of the images was off. Now it will, using the filter:shadow and a background color for text in the #inside division.