[CSS] Drop Shadow - Strict Validation

[jscheuer1]

1) CODE TITLE: CSS Drop Shadow - Strict Validation

2) AUTHOR NAME/NOTES: John Davenport Scheuer (jscheuer1)

3) DESCRIPTION: The styles are reusable and tweak-able. The HTML markup is repeatable. You can have multiple and/or differently styled drop shadow areas on a page or pages. Uses 5 8x8 Alpha channel PNG images for a light byte load and true shadow effect. You can partially see through them! They go well over any lighter colored background(s).

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/drop_shadow/

[tech_support]

Ouch... tables. No divs used?

[jscheuer1]

As far as I know, using multiple nested divisions for something like this requires a fixed unit width dimension, which (counter-intuitively) cuts down on a designer's ability to create a fluid page. In any case, the biggest drawback of a table is that it can slow down the rendering of a page. Using the valid:

table-layout:fixed;

css property value pair takes care of that by allowing the browser to render the table as quickly as it could render multiple divisions. No nested tables (the other big no-no for tables and rendering speed) are used. With the table-layout:fixed; style though, this table should be able to be nested without taking a rendering speed hit.

[Twey]

Your demo pages are getting snazzier John :)

I actually prefer the Javascript solutions for this sort of thing. It's not vital for the user to be able to render it, after all, and using Javascript does remove a lot of the extra markup and keep the code nice and neat. I feel that no shadows for non-JS users is an acceptable sacrifice.