The most significant improvement to text in CSS3 is the @font mechanism that allows you to define your own fonts and package them with your website. CSS3 has other text-formatting tricks available, too. The text-stroke and text-shadow rules allow you to make interesting transformations on text in your pages.
Both of these rules are used to decorate text, but they can impact readability, so you should use them carefully. They're more appropriate for larger text (like headlines) than the main content of your site.
Text stroke
With CSS3, you can specify a stroke color for your text. This defines an outline around the letter. You can specify the stroke color (using any of the standard CSS color values) as well as a stroke width (using the normal size attributes).
The text-stroke rule applies this effect. You can see it used in the code:
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>textStroke.html</title>
<meta charset = "UTF-8" />
<style type = "text/css">
h2 {
color: yellow;
-webkit-text-stroke: 2px red;
font-size: 300%;
}
</style>
</head>
<body>
<h1>Text Stroke Demo</h1>
<h2 id="tab2" >This text has a stroke</h2>
</body>
</html>
Currently no browsers support the text-stroke attribute directly, but WebKit-based browsers (Chrome and Safari) support the vendor-specific -webkit- version. A browser that does not support the rule will simply ignore it, so this should not be a significant part of your design until support is more complete.
Text-shadow
Shadows are another common feature of modern web designs. Shadows add an element of depth to a page, but they can also enhance readability (if used properly) to lift a headline from the page. The text-shadow attribute was technically part of CSS2, but it has only recently been supported by major browsers.
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>textShadow.html</title>
<meta charset = "UTF-8" />
<style type = "text/css">
h2 {
font-size: 300%;
text-shadow: 5px 5px 2px #cccccc;
}
</style>
</head>
<body>
<h1>Text Shadow Demo</h1>
<h2 id="tab4" >This text has a shadow</h2>
</body>
</html>
The attribute has four parameters:
offset-x: Determines how far in the x (left-right) axis the shadow will be from the original text. A positive value moves the shadow to the right, and a negative value moves to the left.
offset-y: Determines how far in the y (up-down) axis the shadow will be from the original text. A positive value moves the shadow down, and a negative value moves the shadow up.
blur: Specifies the blur radius of the shadow. If the value is 0px, there is no blur, and the shadow looks just like the original text. Generally, you'll want the blur value to be near the longest of your offsets. This allows the shadow to be recognizable as a shadow of the text without becoming a distraction.
color: Defines the shadow color. Generally a dark gray is preferred, but you can also try other colors for special effects. Note that blurring tends to lighten the shadow color. If there is a great deal of blur applied, the shadow color can be the same color as the text. If the shadow will not be blurred much, you may need to lighten the shadow color for readability.
The size of the shadow is determined indirectly with a combination of offsets and blurs. You may have to experiment to get the shadow you're looking for. Shadow effects are best when they are subtle because they can affect readability.
A special case of text shadowing can be used to help text stand out against a background image. Apply a small shadow of a contrasting color. This technique is frequently used when you need to have text on a background because each letter produces its own high-contrast background. Again, be sure not to sacrifice readability for sake of design ethic.
All latest-model browsers support the text-shadow feature. No special prefixes are necessary.
