About a month ago I posted about noticing the Belt of Venus—the red band that circles the entire horizon just after sunset—and the Earth’s shadow on the sky. I snapped this picture on the drive home this evening. This is looking east, away from the setting sun.

Looking east toward Saddleback at sunset.

If you look at the right edge of the picture, behind the silhouette of the tree, you can just see the red band fading into the dark gray of the Earth’s shadow.

(And to think, I almost brought the good camera with me this morning… Update: It turns out that I did bring it, and just didn’t realize it was there. Oh, well.)

I found myself thinking of A List Apart’s CSS Drop Shadows, and decided I’d modify my writing portfolio to use actual drop shadows instead of the clunky border mess I’ve had for the last few years.

The first thing I realized was that the technique isn’t suitable for large, arbitrarily-sized regions, because you need to have a background image as large as or larger than the area being given the shadow. When you’re trying to apply it to most of the page, you need a multi-thousand pixel image. That’s not only hard to work with, but even if it compresses well it’s still going to take up a lot of unnecessary room in the browser’s memory.

I wanted to keep the markup simple, so I shopped around a bit more and came across a CSS drop shadow example at W3C which was very simple: all you do is put a shadow-colored div behind the area and mess with margins.

Well, that worked great in Mozilla, Opera, Konqueror and Safari. Then, the dreaded Internet Explorer test.
Continue reading