Over a million developers have joined DZone.
Platinum Partner

Tweaking CSS3 Text Shadows: Two Examples

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix. Download this Forrester Report to gain a better understanding of the low-code platform market and how to make a strategic platform selection you won’t regret.

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 in partnership with Mendix. Better understand the aPaaS landscape and how the right platform can accelerate your software delivery cadence and capacity with the Gartner 2015 Magic Quadrant for Enterprise Application Platform as a Service.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}