No Photoshop Necessary: A Quick Guide to 3D Text Stylin’

As I’m sure you’re already aware, CSS3 is really pretty wonderful. Along with transitions, which can create animations in a tiny fraction of the old code and time, one of the best features is text-shadow.

Some great reasons to use the text-shadow property:

• Allows us to make pretty headings, hover states and calls-to-action in moments
• Drastically reduces monotonous work doing Photoshop layer blending, saving for web, uploading, HTML tag editing and cache clearing
• Best of all, it lets us keep the text dynamic! This is great for those of us who pass on a project to a less technically inclined colleague or client. I know you’d rather it didn’t get passed back to you for each of the twenty pixel-pushing revision requests, and maybe it can even go into the CMS! That’s less work for you down the road. Sensing a pattern?

text-shadow: #666 3px 3px 5px;

Which breaks down as:

text-shadow: COLOR RIGHT-OFFSET DOWN-OFFSET SIZE;

What it looks like:

Example Header

span.heading_ex_1 {
  color: #FF6866;
  font-size: 48px;
  padding: 0 3px 3px 0;
  text-shadow: #666 3px 3px 5px;
  font-weight: bold;
}

But text-shadow isn’t just for dropshadows, folks! You can layer multiple shadows below your text, and create some really neat-o effects. For a speedy introduction into layering multiple shadows, check out Mother Effing Text Shadow, created by my good friend, gentleman and scholar Paul Irish.

Example
Header

Here, I’ve added four additional text-shadow layers, just separating them with commas. The right- and down- offset distances are just increased by 1px in each layer. As you probably noticed, on their way down and out, each one is slightly darker. This gives the text a bit more of a 3D effect. If you use Chrome, you can get the perfect colors by tweaking them in dev tools. Easy!

To go a bit further down the path of text-styling obsessive-compulsion, I’ve tightened up the kerning with the letter-spacing property. I’ve also set a specific line-height, so we can break a line if you’d like, and keep things nice and tight.

One extra tidbit to note, if you’re not sure how tall the element you’re styling will be, it’d be a good idea to pad it out to the distance which the shadow will extend. In this case, 1px+2px+3px+4px+6px.

span.heading_ex_2 {
  color: #FF6866;
  font-weight: bold;
  font-size: 60px;
  letter-spacing: -3px;
  line-height: 50px;
  padding: 0 16px 16px 0;
  text-shadow: #C00 1px 1px 0px,
               #A92222 2px 2px 0px, 
               #844 3px 3px 0px,
               #755757 4px 4px 0px,
               #666 6px 6px 5px;
}

For those of you who’d like to take a slightly lazier route, there’s an app available now which can output CSS3 for you right from within Photoshop, so you can design using the easy-to-use PS layer blending tool. It’s called CSS Hat, check it out.