Looking for ways to jazz up your website? With new CSS3 techniques it’s easy to add some nifty text effects that can make your site really stand out. What’s great about these effects is that they degrade gracefully; that is to say that, if a browser (in this case, Internet Explorer) does not support the new CSS rules, there is a satisfactory fallback.

Check out the demo of some text-shadows in action.

Advantages of using CSS text over images

The ability to use CSS text effects is very exciting for a lot of designers out there, who are used to using Photoshop to create header images. Although it can look very appealing to create images to display text, there are some major advantages to using plain text over images:

• Image files are considerably larger than plain text and take longer to download. Using plain text instead of image headers will decrease your loading times.
• Plain text will be easily scanned by search engines; images don’t work so well (even with alt tags). This one is important, since headers typically contain important information about site content. Admittedly, however, there is a workaround for using plain text and images together.
• You can copy and paste plain text. This comes in handy.
• You can easily convert your website to different formats (e.g. PDF) without loss of structure.
• Plain text headers can be scaled and re-sized easily without loss to legibility.
• It can make life easier for those who want to print out your web page (depending on the image).
• Content can be generated easily and quickly, no Photoshop experience necessary.
• Content can be dynamically generated (strictly speaking it’s possible to dynamically generate images with text, with PHP for example, but it’s just not practical).

Examples of CSS Text Shadow Effects

CSS text shadows allow you to create your own photoshop style text effects, such as:

• Basic Text Shadow
• Inset / Emboss
• Glow
• Blur

Text Shadow

The text shadow property is supported in all major browsers, except Internet Explorer (big surprise).

A basic text shadow is applied like so:

h1 { text-shadow: 2px 2px 3px #666; }

text-shadow properties: horizontal offset (+/-), vertical offset (+/-), blur radius (optional), colour (optional)

Here is what it looks like in action:

It’s also possible to use multiple shadows to spice things up a bit:

text-shadow: 0px 0 1px #BBBBBB, 0 -1px 2px #FFFFFF ,
 0 -3px 2px #FFFFFF , 0 30px 25px rgba(0, 0, 0, 0.796875);

Notice how you can use RGBA to describe colours. This way you can make use of the alpha channel to make shadows partially transparent (naturally, transparencies don’t work in IE 8 and below).

Inset / Emboss

Here is the CSS code applied to the header:

color: #555;
text-shadow: rgba(0,0,0,0.5) -2px 0, rgba(0,0,0,0.3) 0 -2px,
 rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -2px -2px;

As you can see, the text really stands out and looks like a graphic that might have been created in Photoshop.

This is the part, however, where you have to be careful with unsupported browsers (i.e. IE). If you make the text the same colour as the background, relying on the text-shadow for contrast, the text will be invisible in unsupported browsers.

Here is what the same header will look like in IE:

 Blur

It’s very easy to make blurred text. All you need to do is make the text colour transparent and make the text shadow the colour you want the blurred text to be along with a suitable radius. The problem is when text-shadow is not supported, the text becomes invisible.

color: transparent;
text-shadow: #000 0 0 5px;

Glowing Text

Making glowing text is basically just using bright text on a dark background with a bright text-shadow. The effect turns out quite nicely. Here is one with two text-shadows placed on a div with a black background colour:

color:white;
text-shadow:0 0 25px yellow , 0 0 60px yellow ;

Here is the demo if you want to check out the text-shadows in action (provided that you are using a supported browser).

Related posts:

1. CSS3 Text Background The other day I came across an interesting post by Trent Walton...

Author: Graham

My name is Graham Clark, I'm from Edinburgh, Scotland. I'm now a permanent resident in sunny California. I'm interested in the Internet in a big way; the way websites work, how they are structured and the way the Internet is heading. I like working with clean code and I enjoy validating my work to current web standards and across multiple browsers (yes, even IE).