CSS 3: Text Shadows
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:
|
1 2 3 |
#element { text-shadow: 1px 1px 1px orange; } |
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:
|
1 2 3 |
#element { text-shadow: 4px 4px 1px red, -4px -4px 1px blue; } |
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:
|
1 2 3 4 5 |
#element { text-shadow: 0px 0px 1px black; font-size: 22px; color: white; } |
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).
