Tweaking CSS3 Text Shadows: Two Examples

If I had a dime for every time I created a text drop-shadow in Photoshop, I wouldn't have worried about the price.

But this seems a little wasteful: drop-shadowing for a living would be like erecting awnings for a living, if Photoshop were a structural engineer.

Drop-shadows are simultaneously very simple and extremely common -- which is why CSS3 now has text-shadows built-in.

The spec itself is quite simple (x and y offset, blur radius, color). So adding a single drop-shadow is as simple as applying one property.

But CSS developers have never been short on clever tricks, and text-shadow is no exception.

Two websites offer slightly different clever uses of text-shadow, designed to produce more complex 3D text effects:

• Chris Coyier's 3D Text Tower combines multiple shadows with transitions and transformations to produce several pleasing mouseover effects. Very few shadows at any given time, to keep the transitions clearly visible.
• Rohit's 3D text tutorial overlays numerous shadows (up to twelve) with multiple offsets to produce much more veristic 3D text -- not just 'here's a shadow', symbolically, but 'this looks like solid plastic'.

Maybe start with the first, then move on to the second, then apply some transitions from the first to the second, for cooler effects.