Tuesday, 28 August 2012

Outlining Your Text, or Fun With CSS Text Shadows!

So one thing I’ve always wanted to be able to do with CSS is to make my text have outlines. There is actually a property for doing just that: text-outline. Guess which browsers support it? That’s right: None o’ dem.

But it’s still entirely possible to get an outline effect with the almost-entirely-supported property text-shadow. Like this:

Outline & Shadow!

Note to people who are reading this via RSS: you should really click over to my website so you can see what the heck I’m talking about. Also, guess which browser does NOT support the text-shadow property? Even though it’s about seven years old or so? If you guessed a product made by Microsoft, well, then congratulations are not in order because the answer was pretty effing obvious. So if you’re looking at this website in IE… well, knock it off. Go download Chrome or something. What are you thinking? Jeez.

Anyhoo, this trick has been around since at least 2005, so it is probably old hat to most of you. But I likes it! It’s pretty easy, and involves making a 1-pixel, un-blurred shadow 1 pixel away from the text in every direction. Most people only use 4 shadows to do this (the 4 diagonal directions), but I find I get better coverage if I make shadows in all 8 directions, especially with serif or complicated fonts. You can also add an extra one to make the outlined text have an actual shadow. It’s easy! Here’s the code to re-create the text you see here.

h1 {
text-shadow:1px 1px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
0px 1px 0 #fff,
1px 0px 0 #fff,
0px -1px 0 #fff,
-1px 0px 0 #fff,
4px 4px 3px #000;
font-family:Verdana, Geneva, sans-serif;

You can also do some cool bezel effects with colored text and outline shadows, like this:

Beveled & Embossed!

text-shadow: -1px -1px 0px #000,
1px 1px 0px #FFF,
2px 2px 0px #FFF,
-2px -2px 0px #000;
font-family:Verdana, Geneva, sans-serif;

You can also do some cool glowing effects with a shadow that isn’t offset, but is incredibly blurred. Like this!


text-shadow:0px 0px 10px #fff;
font-family:Verdana, Geneva, sans-serif;

Anyway, I just think it’s fun-fun-silly-willy. It’s also legit helpful if you end up having text that’s just too close in color & value to the background, or if you need to put text over a complicated background that has a bunch of different colors and values all up in it.

Hopefully soon the major browser will start to support the text-outline property and we won’t have to jump through all these hoops to fake it (if you think this overly complicated, just do a Google search of how to make text shadows in Internet Explorer to see all the workarounds you have to do with that browser). Until then, SHADOW ON!

Categories: Computers.

3 thoughts on “Outlining Your Text, or Fun With CSS Text Shadows!”

  1. Paul says:

    Thanks for the code. Looks great.

  2. Ron Graham says:

    You’re very clever to have worked all this out. This is just what I was looking for to make banners. My intuition told me that text-shadow should be able to create outlines, so I googled that, and your excellent page came up. Thank you for saving me time.

  3. Q. Mulative says:

    This stuff looks fantastic. When working with coloruful layouts, getting text to be legible can be a huge challenge if you don’t have access to outline/shadow tools.

    The old Macintosh computers (the ones that existed back when 1MB of RAM was actually a selling point) actually had “Outline” and “Shadow”, and sometimes “Strikethrough” as standard font modifications in word processors, in addition to the standard “Bold” “Italic” “Underline” you see today. Too bad they fell out of use.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

« Previous Post: First-Person Perspective Video of the Mars Curiosity Landing
» Next Post: Kick Some Hands: “The Gamers: Hands of Fate” Kickstarter