Cheesetoast

Brain Food for Web Developers

CSS Folder

CSS3 Text Effects

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:

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:

CSS3 Text Shadow Effect

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);

Multiple Text Shadows

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

These effects are popular in Photoshop. By applying multiple light and dark shadows around the text we’re able to create the illusion that the letters are either inset into the screen or embossed. For this demo I’ve created a div with a gray background (#666). Inside the div is a header with text shadow applied to it.

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;

Text Shadow - Inset

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:

Text Shadow - Unsupported

 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.

Some Blurred Text

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:

Some Glow Text

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).

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.