Over a million developers have joined DZone.

Tweaking CSS3 Text Shadows: Two Examples

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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.


The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}