Unit Verse

Text-Shadow and Too Much Time

• by Nathan Ford 2 years ago
• 6 Comments

CSS3 gives us many great new toys, and recently I spent some time exploring one of my favorites: the text-shadow property. Before we get in to the examples, here are some fun facts about this property:

• text-shadow does not require any prefix (such as -moz- or -webkit-)
• it allows multiple values, so you can add multiple shadows to text
• as right of now, text-shadow is not supported in the IE9 beta, but is supported by every other browser
• its been around in WebKit since 2006, but was just added to Firefox with version 3.5

The syntax is fairly simple:

text-shadow: x-offset, y-offset, blur amount, color;

…and just add values – separated by commas – for multiple shadows. I found that using ems for the offsets and blur helped with fine-tuning the effect.

In Action

With text-shadow, we can achieve some not-ground-shaking-but-as-yet-unheard-of effects with web typography. To see what I mean, check out this bevy of demos I concocted.

Letterpress

To achieve a letterpress effect, first create a text-shadow without blur that is offset below your text and is the same color as (or slightly lighter than) your background:

text-shadow: 0 2px 0 #fef8f0,

Then add a blurred, darkened shadow with no horizontal or vertical offset:

text-shadow: 0 2px 0 #fef8f0, 0 1px 3px #bbb;

Note that you only need to add a comma between shadow values. You may want to lessen the effect on smaller text. In my example, the P elements have less of a blur on the darkened shadow.

Outline

Outlines are simple in context, but kind of a pain to execute. Basically, you want to surround your text with five sharp shadows of the same color:

text-shadow: 0 1px 0 #fff,
             1px 1px 0 #fff,
             -1px 0 0 #fff,
             -1px -1px 0 #fff,
             1px -1px 0 #fff;

I noticed some issues with the outline being cut off in WebKit browsers; this can be fixed by adjusting the line-height. WebKit supports a text-stroke property as well, but this text-shadow method is preferable since it works in more browsers (except, of course, IE).

Emboss & Engrave

Using the same concept as the outlines, you can also create an embossed or engraved dimension to your text. Instead of all for sides being the same color, though, just contrast opposite sides with an opposite value:

text-shadow: 0 1px 0 #888,
             1px 1px 0 #888,
             -1px 0 0 #fff,
             -1px -1px 0 #fff,
             1px -1px 0 #fff;
             /* Text embossed */

text-shadow: 0 1px 0 #fff,
             1px 1px 0 #fff,
             -1px 0 0 #888,
             -1px -1px 0 #888,
             1px -1px 0 #888;
             /* Text engraved */

You can fine tune from here to enhance or exacerbate the illusion.

Echoes

This is one of my favorite styles. It reminds me of baseball jersey text. You can create this style by first offsetting a sharp shadow that is the same color as the background by two pixels:

text-shadow: 2px 2px 0 #fff,

…then add another sharp shadow of a different color, offset by three pixels:

text-shadow: 2px 2px 0 #fff, 3px 3px 0 #888;

These distances are, of course, relative and should be adjusted as needed.

Extrusion

I actually got this one from Mr. Trent Walton, who does it much better. My only twist is to vary the colors to make a slight gradient:

text-shadow: 1px 1px 1px #ccc,
             -1px -1px 0 #bbb,
             -2px -2px 0 #bbb,
             -3px -3px 0 #b7b7b7,
             -4px -4px 0 #b3b3b3,
             -5px -5px 0 #b0b0b0,
             -6px -6px 0 #acacac;

Ad Infinitum, Sine Nauseum (Hopefully)

There are a few other examples and experiments on my demo page, which I encourage you dissect to derive your own. The real trick with any style is to know when to use it, and to what degree. My advice: always err on the side of subtlety. Please.