Web Style Sheets CSS tips & tricks

Text shadows

CSS level 3 has a property called 'text-shadow' to add a shadow
to each letter of some text. In its simplest form, it looks
something like this:

h3 {text-shadow: 0.1em 0.1em #333}

Which adds a dark gray (#333) shadow a little to the right
(0.1em) and down (0.1em) relative to the normal text. The result
looks like this:

The noak and the barcicle

Fuzzy text shadow

The simplest form of the 'text-shadow' property has two parts: a
color (such as the #333 above) and an offset (0.1em 0.1em in the
example above). This results in a sharp shadow at the indicated
offset. But the offset can also be made fuzzy, resulting in a more
or less blurred shadow.

The amount of fuzziness is given as another offset. Here are two
lines, one with a little fuzziness (0.05em) and one with a lot
(0.2em):

“What do you say?” said the UK

In order to see more clearly

Readable white text

Shadows can make text more readable if the contrast between the
foreground and the background is small. Here is an example of white
text against a pale blue background, first without a shadow and
then with:

I wish wish wish…

I, Augustus (you know who)

That's extra, of course

This is a bit dangerous, as you can see if your browser doesn't
support 'text-shadow'. In fact, the colors of the background and
the text in this example are almost the same (#CCCCCC and #D1D1D1),
so without the shadows, there is barely any contrast.

Drawing letters as outlines

The two-shadows example of the previous version can be taken
even further. With four shadows, letters can be given an outline:

Are you feeling red?

A cat, an apple, etcetera

It is not a perfect outline, and at this time (August 2005), the
discussion is still open whether CSS should have a separate
property (or perhaps a value for 'text-decoration') to make better
outlines.

Neon glow

If you put a fuzzy shadow right behind the text, i.e., with zero
offset, the effect is to create a glow around the letters. If the
glow of a single shadow isn't intense enough, just repeat the same
shadow a few times: