IE10 in the Windows Developer Preview introduces support for hardware-accelerated CSS3 text-shadow. Text-shadow is one of the top requested features from Web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text.
[h=2]Text-Shadow in IE10[/h] As its name suggests, text-shadow is a CSS property that draws a shadow behind text.
Use it to draw attention to text and to give the text some depth. In some cases, especially with text over an image or color background, text-shadow can be used to add contrast and improve readability. Because IE10 as well as other browsers support the standard, no-vendor-prefix form of text-shadow, sites using text-shadow today will just work in IE10. As part of our commitment to standards-based quality, we’ve submitted 10 test cases to the CSS3 Text Test Suite with a pass rate of 9/10.
Example of a purple text-shadow behind text
Example: a subtle text-shadow appears when navigating to Twitter in IE9 (left) and IE10 (right)IE10 supports the same definition of across box-shadow and text-shadow as called out in the text-shadow spec: “ is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.” This definition is color plus four parameters: x offset, y offset, blur radius, and spread distance. Only IE10 currently supports the spread distance parameter (see “The ‘spread’ parameter and interoperability,” below).
Example: text-shadow appears when navigating to an auto service Web site in IE9 (left) and IE10 (right)
[h=2]How to Use Text-Shadow[/h] The most basic text-shadow requires an x and y offset:
.shadow1 { color: black; text-shadow: 2px 2px; }
Most of the time, you will also want to specify a text-shadow color as well:
.shadow2 { color: black; text-shadow: #87CEEB 1px 3px; }
The color parameter can be placed at the beginning or end of the shadow definition. You may also add a blur radius, which describes the amount the shadow should be blurred using a Gaussian blur algorithm:
.shadow3 { color: black; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); }
A spread distance may also be specified. A positive value describes the amount that a shadow expands, whereas a negative value describes the amount that a shadow contracts:
.shadow4 { color: black; text-shadow: skyblue 0px 0px 0px 4px; }
The effect of a text-shadow with positive spread can often be imitated by drawing enough 0-spread shadows. However, the markup to achieve this is more complex and may result in a lower-performance, lower-quality shadow:
.shadow4_nospread { color: black; text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; }
The spread parameter makes accomplishing the effect much easier. It can also be used to accomplish effects that otherwise impossible to achieve when negative values are used:
.shadow5 { text-shadow: 5px 5px 2px -2px #9966CC; }
The above five parameters describe only a single shadow. The text-shadow property supports a list of shadows, stacked from front to back. Below is a text-shadow with a partially transparent white shadow drawn on a yellow shadow, drawn on top of an orange one which is drawn above a red one:
.shadow6 { text-shadow: rgba(255, 255, 255, .5) 1px 1px, yellow 2px 3px, rgba(255, 153, 0, .7) 3px 6px, rgba(255, 0, 0, .5) 4px 8px; }
[h=2]The ‘spread’ parameter and interoperability[/h] At this time, only IE10 supports spread distance. The lack of support can be attributed in part to conflicting implications in the W3C spec, which states the computed value is “a color plus three absolute s” while also stating “ is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.” The box-shadow spec defines as “specified by 2-4 length values, [and] an optional color.”
When interoperability is the goal, keep in mind that a text-shadow with a spread parameter will be parsed as invalid by browsers that do not support it. Your markup should include a fallback version of text-shadow without ‘spread’ should you choose to use the last parameter, otherwise no text-shadow will appear in browsers that do not support spread.
.shadow7 {
color: black;
text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread distance */
text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with the full spec */
}
Text spread enables many more effects, such as stroked text (as seen above), a darker blurred shadow, or a skinnier shadow. We welcome your feedback regarding the ‘spread distance’ parameter and are committed to conversing with the CSS Working Group to improve clarity around text-shadow in the CSS Text specification.
[h=2]Improving upon the past[/h] In older versions of Internet Explorer, the proprietary DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow, and DXImageTransform.Microsoft.Blur filters were often used to produce the text shadow effect that is now supported in IE10 via CSS3 text-shadow. Instead of using these DXImageTransform filters to achieve a text shadow effect, use the text-shadow property for IE10. Not only does it achieve the effect in a standards-compliant interoperable way, but hardware-accelerated CSS3 text-shadow also provides significant performance gains over the older alternative.
[h=2]Fallback behavior[/h] Sites using text-shadow today degrade gracefully when rendering without a text-shadow. In many uses of text-shadow on the Web now, the text shadow is subtle decoration that adds visual depth. However, text-shadow can also be used form more creative visual effects.
If you need to support browsers without text-shadow support, make sure to use feature detection for textShadow in the CSSOM to conditionally change the color of your text when taking this artistic liberty.
Example of text-shadow use that has poor fallback viewed in IE9 (left) and IE10 (right)
Using feature detection:
if (typeof document.body.style.textShadow == 'undefined') {
// text-shadow is not supported
document.body.style.color = 'black';
}
else {
// text-shadow is supported
document.body.style.color = '#FFFFCC';
document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}
[h=2]Give text-shadow a try[/h] Try using text-shadow today! If you already are, explore the new possibilities that the ‘spread’ parameter unlocks. Using multiple shadows and tweaking the different parameters can create some interesting effects.
Here’s my gallery of interesting and silly text-shadow effects:
Note that you can use text-shadow with WOFF fonts and input elements and in conjunction with CSS3 Transitions and Animations! If you are using a browser that supports both text-shadow and CSS Transitions and Animations, view the gallery above in a separate tab to see the features in action together. You can then use View Source or your browser’s developer tools to view the markup.
Get your creative juices flowing and try out text-shadow in IE10 in the Windows Developer Preview. The IE Test Drive demo Hands On: text-shadow offers an interactive way to experiment with text shadow. See how easy it is to make your text spring to life!
—Jennifer Yu, Program Manager, Internet Explorer
More...