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 {
font-size:50px;
color:#000;
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!

h1{
font-size:50px;
text-shadow: -1px -1px 0px #000,
1px 1px 0px #FFF,
2px 2px 0px #FFF,
-2px -2px 0px #000;
color:#006600;
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!

SO GLOWY!

h1{
font-size:50px;
text-shadow:0px 0px 10px #fff;
color:#006600;
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!