CSS 3: Text Shadows

/ CSS / by Paul Robinson / 0 comments
This post was published back on May 3, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

As I said, while most CSS 3 properties are not supported in certain browsers (mostly Internet Explorer), they can still be used to improve the look of your website. As a web developer/designer graceful degradation, the loss of certain features/design elements while maintaining functionality, is just something you must get used to due to people still using out of date browsers.

In our first look at CSS 3, how to use Text Shadows & what they can look like. Note: The examples in this tutorial are live CSS examples so you will need a CSS 3 compatible browser to view them. FireFox 3, Safari 4 and the latest Google Chrome builds all support CSS 3.

Text Shadow: The Syntax

The Text Shadow property is used just like any other CSS property, but let’s take a look at the values it takes:

The values are text-shadow: [-left/+right] [-top/+down] [blur] [color]. That CSS code will produce text like this:

This text will have a shadow

Text Shadow: Effects

You can create all sorts of great effects with text shadows that you would normally create in a graphics application such as Photoshop. The difference is that you can use CSS on normal text on any page instead of just in images. Remember though that some browsers may not be able to view text shadows & so they should be used with care.

You can also create multiple shadows on the same piece of text like so:

Here is what it would look like:

This text will have a shadow

Not the prettiest example, but it illustrates perfectly how two shadows can be used on one piece of text.

You can also create the famous DVD subtitle effect. White text with a black outline:

This text will have a shadow

These are just a few of many font effects you can achieve using text shadows. You can see another font effect in action on Celeb O Rama, behind the white text in the featured area.

Text Shadow: Graceful Degradation Tips

As I have already said graceful degradation is a very important part of using CSS 3 properties. Degradation of the Text Shadow property results in no shadow being shown. As such you must make sure that if the shadow is not shown your text is still readable. In simple terms it isn’t a good idea to use white text on a white background with a black shadow, such as the DVD subtitle effect. Browsers without CSS 3 support will not be able to see your text.

Basically your text must be readable with or without your Text Shadow. A Text Shadow is like the sprinkles on a cupcake, they still taste great without the sprinkles!

I hope this tutorial helps with any questions you may have about using Text Shadows. If you still have a question or you have any comments please let me know via the comments, or you can follow me on Twitter there is a link in the sidebar (the big blue birds).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more