This page Demos the concept of flexible drop shadowed boxes using CSS

This box uses shadowdark.gif (53 bytes)

Having used semi-transparent gifs for normal box backgrounds (ALA New York library style sheets), and to make text appear more grungy/pixelated (my first ever CSS design) - i realised that they could also be used in other ways. One cool use of them is to provide shadows for other CSS boxes. The idea is as follows:

1. Use a holder DIV - can be positioned absolute/relative/floating.
2. Set the background of this DIV with the semi-transparent gif. This becomes the shadow of the box.
3. Finally, use a relatively positioned 'content' DIV inside it with: {top:-10px; left:-10px} set in the CSS. Varying these values gets you a relative shadow 'offset'.

This effect gives the boxes an impression of floating above the background, because the shadow is semi-transparent so it picks up background colours etc. Therefore you never need to change them if you redesign your site colours, or change background images. Ah, the joys of transparency...

I've also tried making a 30% opacity 24bit .PNG for the shadow graphic (see larger box on the right); the .PNG graphic is far more 'accurate' (but note - there is a big difference in the way LCD and CRT monitors render the .gif and .png - LCD shows the gif clearly pixellated whereas the CRT blurs them to look similar).

After I made this page, I found that the W3C's very own Bert Bos describes a similar effect, although without the wholesome goodness of Tranparency inside.

This file has embedded CSS to make seeing what's going on easier. Just 'view source' to see what's under the hood.

Mail me from: nontroppo.org | Back to CSS page

Using 24bit .PNG files for the shadow...

This box uses shadow.png (163bytes). Unfortunately, PNG support still seems quite crummy in many browsers.

IE6/win just makes this .PNG shadow opaque, but Mozilla (V1.0) makes it disappear entirely! Mozilla V1.4 gets it almost right though (although has clear border display problems on a resize). Both Opera V6.06 and Opera V7.1 show the .PNGs perfectly. I've been told that IE5.1.3 for Mac doesn't display the .png file either, but Safari V1.0 does... Any other browser info appreciated, you can email from my homepage.

However, none of these problems break the design, you merely lose the shadow effect.

Here are some more .pngs for you to take home (just click on them to download the .PNG, note there are some white-based shadows too, this will give a glow effect, and is also good as a background inside block elements:

Profound Spiritual Implications?

Demons are known to lurk in shadows. There is indeed substantial evidence (mostly from small children, however) for such situations. The question is whether this will impact rendering the CSS in compliant browsers? Will demons hidden in shadow DIVS cause particular browsers problems, or will demonic possession actually enhance rendering. Additionally, some people claim Microsoft software is already 'evil', how will additional demonic content affect them?

Valid XHTML V1.0 strict and CSS V2.0.