Over the holiday break, I stumbled upon a wonderful article describing several CSS tricks to add eye-candy without images. I've been using rounded corners here at the site since the last theme update, and thanks to this article, I'm now employing drop shadows. The effect is subtle, but adds a lot to the design; in short, I like it.

The style rules for adding drop shadows are very simple, though proprietary; it's a shame this stuff can't be standardized properly. Here's the code to use a drop shadow (the values shown are the ones I'm using on the site):

#myelement {
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Firefox */
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Webkit */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Standards way */
}

The article even details the appropriate style code for Internet Explorer, but I haven't included it here, mainly because it's ugly. Other effects that the article explains are glow (the opposite of drop shadow, essentially), gradients, rotating images with CSS, transparency, and a few more advanced tricks. It's great that this support is built-in to most standards compliant browsers. So long to those annoying images that try so desperately to do the same thing!

Update: So it turns out that adding this eye candy significantly reduces scrolling performance in Firefox (quite an annoyance). Chrome doesn't have this issue, so it's clearly a Firefox problem. Should I keep the shadows and suffer the performance hit? Or should I chuck them and keep things snappy?

Also, Webkit browsers don't support the inset modifier for shadows, which means you see even less eye candy in Chrome, et al.

Update 2: I've removed the drop shadows for the time being. After all, this stuff is experimental.