1. Computing

Discuss in my forum

How to Use Text-Shadows to Make More Interesting Text

Create Stroked Text and 3D-Like Text with CSS

By

It's like the circus came to town

You can make text like this using just CSS, no images

Screen shot by J Kyrnin
Fancy Headline

These fancy headlines are made with the text-shadow property.

Screen shot by J Kyrnin
Outlined text

You can even make your text appear outlined with a text-shadow.

Screen shot by J Kyrnins

If you haven't used the CSS text-shadow property to create shadows on your text, you are far behind the curve in designing creative and interesting headlines and other text. The text-shadow property has been supported by browsers for years. In fact, these days all modern browsers including Internet Explorer 10 can display text shadows with no problem.

Using the text-shadow property is pretty straightforward, you define the position of the shadow in pixels with the horizontal and vertical distance from the text and the color of the shadow.

text-shadow horizontal vertical color;

Positive positions move the shadow to the right and down. Negative positions move the shadow to the left and up. You can use standard hex colors or RGBa colors.

But you can add a third number to your shadows. This defines how blurry your shadows should be. The bigger the number, the more fuzzy it will be.

text-shadow horizontal vertical blur color;

Using text shadows, you can create a glow effect just like with box shadows. But you can also do other fun things with the shadows.

Multiple Shadows

One of the most entertaining things you can do with shadows is add more than one. This can make your text look almost like a circus act. Try putting this class on a headline and see what happens:

.circus {
  text-shadow: 1px 5px 3px red,
         -1px 4px orange,
         10px -2px yellow,
         5px 8px green,
         -4px -1px blue,
         3px 2px 6px purple;
  font-size: 56px;
  color: #fff;
  font-family: fantasy;
}

Your example may look slightly different from mine, depending upon which font your browser uses for the fantasy generic font, but the shadows will make it look pretty fun in every modern browser. Only Internet Explorer 9 and lower will have trouble.

The other thing you should note about these styles is that the font color is white (#fff), the same color as the background. If you suspect that many of your readers will be viewing the page in a version of IE that can't display text shadows, then you should consider making the font color something other than exactly the same as the background color. The best solution in that situation is to make the text a color that matches your page design and put that color in a conditional comments style sheet for only IE 9 and lower to see.

But multiple shadows don't have to be quite that garish. One of the more popular things to do with them is to create text that almost looks 3D. Here's some CSS that will create the first fancy headline in the image on this page:

.fancy-headline {
  font-family: arial, helvetica, sans-serif;
  font-size: 50px;
  color: #fff;
  text-shadow: 1px 2px 0 #090909,
         2px 3px 0 #111,
         3px 4px 0 #191919,
         4px 5px 0 #222;
}

Note that this has the same issue with color as the circus text did. But while this text is really nice looking some people might find it difficult to read because the text left and upper edges blend into the background. While we are still waiting for CSS to approve a property like -webkit-text-stroke or possibly a new value for the text-decoration property to stroke the borders of text, we can do this using the text-shadow property as well. Add two more shadow lines to the above headline:

.fancy-headline2 {
  font-family: arial, helvetica, sans-serif;
  font-size: 50px;
  color: #fff;
  text-shadow: 1px 2px 0 #090909,
         2px 3px 0 #111,
         3px 4px 0 #191919,
         4px 5px 0 #222,
         -1px 0 black,
         0 -1px black;

}

You can also use just the shadows to create text that appears to be outlined. The outline isn't perfect, as you can see from the screen shots, but it's available for use right now, no waiting for the property to be defined. I put the following styles on a block of text set in a DIV element with a background-color of violet:

.outlined-text {
  color: violet;
  text-shadow: -1px 0 black,
         0 1px black,
         1px 0 black,
         0 -1px black;
}

As you can see from the screen shots and trying these styles yourself, the text-shadow property is much more useful than just putting shadows on text. You can create some pretty amazing effects and all without any graphics to slow down your pages.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. CSS3
  6. CSS3 Tutorials
  7. How to Use Text-Shadows to Make More Interesting Text

©2014 About.com. All rights reserved.