CSS3 text-shadow in IE10
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.
Text-Shadow in IE10
As its name suggests, text-shadow is a CSS property that draws a shadow behind text.
Example of a purple text-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: a subtle text-shadow appears when navigating to Twitter in IE9 (left) and IE10 (right)
Example: text-shadow appears when navigating to an auto service Web site in IE9 (left) and IE10 (right)
IE10 supports the same definition of <shadow> across box-shadow and text-shadow as called out in the text-shadow spec: “<shadow> 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).
How to Use Text-Shadow
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; }
The ‘spread’ parameter and interoperability
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 <length>s” while also stating “<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.” The box-shadow spec defines <shadow> 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.
Improving upon the past
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.
Fallback behavior
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.
Example of text-shadow use that has poor fallback viewed in IE9 (left) and IE10 (right)
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.
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';
}
Give text-shadow a try
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:
Click here to view a live copy of this gallery in a separate tab
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
Comments
Anonymous
September 29, 2011
The PM's are posting again, a new preview must be imminent... Congrats on the team for implementing this feature. (although a little late.) Let's hope developers will retain some good taste and not plaster this style on every font on their site ;-)Anonymous
September 29, 2011
The "Glowing WOFF Text" is pretty cool.Anonymous
September 29, 2011
The comment has been removedAnonymous
September 29, 2011
When will be available ie10pp3 for win7?Anonymous
September 29, 2011
Looks like text-shadow doesn't work within SVG. Any plans to support that? Would be very valuable in mapping.Anonymous
September 29, 2011
I agree with Michel N. connect.microsoft.com/.../svg-filter-dropshadow-support Drop-shadow support via filters in SVG isn't supported. Kindly inform us if its support is planned for IE10-RTW/GA? Looking nice though via CSS!! :-) thanQ.Anonymous
September 29, 2011
What Michel N said.Anonymous
September 29, 2011
Correct: CSS text-shadow does not apply to SVG. That's the standards-compliant behavior. IE10 does support drop-shadow via filters on SVG content. Visit ie.microsoft.com/.../hands-on_svg-filter-effects.htm in IE10, flip to the Text tab in the right column, and experiment with filters on SVG.Anonymous
September 29, 2011
Gosh! ever heard of term "typo"? Never mind its Michael N.Anonymous
September 29, 2011
I am loving IE10 and it's compatibility advances. Thank you IE team. However I fear drop shadow is the new <blink> or animated gif. Drop shadows were cool... in 2005. With the number of people and frequency of complaining about this feature, I feel the web will be ruined within months now. The new fad will be browsers that don't support drop shadow to keep people from going blind.Anonymous
September 29, 2011
@Ted Jhonson[MSFT], please take a moment and open the following link in IE10 and Chrome12+ and there you will find the problem with DropShadow: tavmjong.free.fr/.../svg_test.svgAnonymous
September 29, 2011
@Neil: Thank you. Good reminder. In the IE10 preview that's part of Windows Developer Preview, drop shadows currently work on the <text> element but not subordinate <tspan> elements. That's a bug that will be fixed before final release.Anonymous
September 29, 2011
@Mixed feelings, I think I understand what you are trying to say but the point is; people at W3C decided the standard and recommended implementation of user-agent, not the vendor. Moreover, those browsers that haven't implemented CSS shadow property or anything that is W3C recommendation, are not considered fully-compliant. Btw, these tools are ultimately making the graphic-designers' life easy, like with this they don't need to use photoshop to apply shadow on text. So at any point in time, if you feel that you are going blind due to some text shedding noisy shadow, blame the designer! :-) @Ted Johnson [MSFT], thanks for the clarification. These implementations would certainly revolutionize Internet Explorer :)Anonymous
September 29, 2011
@Jennifer Yu [MSFT] How is fractional pixel resolved? I see nowhere how fractional pixel in the official W3C TRs (draft or CR or PR). 1.4px (-1.4px) could be resolved as 2px (-2px) or as 1px (-1px): either way, there is no official normative parsing rule in the W3C specs. "hardware-accelerated CSS3 text-shadow": why do you say hardware-accelerated? Is text-shadow really processed by GPU in IE10PP3? Gérard TalbotAnonymous
September 29, 2011
@Jennifer Yu [MSFT] Your examples also mix pt unit with px unit. 3pt is 4px when 96DPI is set; you chose 32pt in outlined class and text3d class and this will cause rounding up or rounding down situations. Also, font-family is not perfectly and universally the same under different operating systems. Tahoma is not universally supported by default on other operating systems so the default generic sans-serif will be used where the x-height can be different. Again, another source of difference of rendering when vertical-align: middle will be applied. Finally, text-shadow: white 0px -1px 0px 4px, rgba(255, 0, 0, .8) 0px -4px 0px 7px, rgba(255, 0, 0, .5) 0px -6px 0px 12px, rgba(255, 0, 0, .5) 0px -7.5px 0px 15px; will most likely be rendered slightly differently because of fractional pixel and other factors (vertical-align: middle, available font-family used). IMO, examples like that should always avoid fractional pixels and non-convertible unit values like 32pt. Gérard TalbotAnonymous
September 29, 2011
This should have been implemented in IE9.Anonymous
September 29, 2011
@David S You have no taste. Neither does Microsoft judging from these examples.Anonymous
September 29, 2011
Worth a mention that for some basic text shadows, you can get a decent-ish match in IE 9 and lower: whattheheadsaid.com/.../creating-a-nice-text-shadow-in-internet-explorer I use it on a couple of sites and, even though there's a clear difference when comparing browsers side by side, it's only the same as the difference betweentext-shadowimplementations in current browsers anyway.Anonymous
September 30, 2011
YESSSSSS!!!!!!!!!!!!!!!!!!!!!!!!! Thank you IE Team! You guys rock! Now to convince everyone to upgrade to Windows 7 or 8.Anonymous
September 30, 2011
@Jim. It's all CSS so it's awesome. Why don't you share what you consider to be "tasteful"? Don't tell me you are one of those guys who is mad because there is no SVG Font support.Anonymous
September 30, 2011
@Gérard: IE10's text-shadow is hardware-accelerated using the new Windows 8 Direct2D Image Effects subsystem (see code.msdn.microsoft.com/.../Direct2D-Image-Effects-4819dc5b). D2D Image Effects uses pixel shaders executed in the GPU. Regarding fractional pixels and units other than pixels: both IE9 and IE10 support fractional pixel widths in CSS and throughout the DOM.Anonymous
September 30, 2011
@Gérard Talbot, unless you are a troll, you would have appreciated the answer. But you are a troll... just saying!Anonymous
October 01, 2011
@Jennifer Yu [MSFT] There is no normative parsing rule in the W3C specs regarding how fractional pixels are resolved or should be resolved. You said "both IE9 and IE10 support fractional pixel widths in CSS and throughout the DOM". I do not understand why you are saying that. By definition, a pixel is the smallest element on a screen given its resolution. I see no normative parsing rules on how fractional pixel in the official W3C TRs (draft or CR or PR) should be handled. Please quote the spec if you think I'm wrong. Gérard TalbotAnonymous
October 01, 2011
If you look into blogs.msdn.com/ie and after 20-30 minutes if u try to post a comment as a guest user (without login) and hit post button, the page will refresh instantly without posting the comment and there is no way to get it back. I guess there is some timeout issue with page postback. Please look into it and rehash the code on both domains. This behavior is independent of the vender and version of browser. Just wait for couple of minutes (say it took you 30 minutes to read the entire post and all the comments) and then post a comment as anonymous... OAN, with Windows Team Blog on IE10 dev preview (on Windows8 dev preview), with Browser Mode Internet Explorer 10 (page default on load!) the login session doesn't persist. To reproduce this bug, open windowsteamblog.com in IE10, click Sign in link at top right corner, provide credentials and click sign in button. On the next page the website wouldn't recognize your session. As a workaround, press F12 change the "browser mode" to IE9 and the page will refresh with your handle and SignOut button at the top right corner. Like IE-Team suggested in the good programing practices that we need to check for the feature in browser rather than the vendor and version of user-agent, it seems like some code requires attention. Please forward the bug report to IE team, if the issue is with IE10. Please fix these issue.Anonymous
October 01, 2011
@Gerard Talbot see: www.w3.org/.../css3-values under heading 5.2 Apparently, 1px is equal to 1/96th of an inch.Anonymous
October 03, 2011
About time. "It enables text effects that were previously difficult or impossible to accomplish." In IE.Anonymous
October 03, 2011
So it was easy in other browsers even without text-shadow? Because your quote is saying it was hard before text-shadow was invented, not whatever your trying to twist it to say.Anonymous
October 05, 2011
That's great news :-) - now let us have a preview version to try out this much missed feature.Anonymous
October 09, 2011
Any planning to support css border-image? This would also be useful. www.w3.org/.../css3-backgroundAnonymous
October 10, 2011
The comment has been removed
