{"id":2720,"date":"2011-04-14T10:13:05","date_gmt":"2011-04-14T14:13:05","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=2720"},"modified":"2013-12-30T13:35:00","modified_gmt":"2013-12-30T17:35:00","slug":"css3-text-shadow-can-it-be-done-in-ie-without-javascript","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/","title":{"rendered":"CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?"},"content":{"rendered":"
\n

Update: April 24, 2011<\/h3>\n

Since writing this article, I have also discovered a way to implement blurred text-shadows in IE9+<\/a>.\n<\/div>\n

\n

Update: July 13, 2011<\/h3>\n

You may want to read my subsequent article<\/a>, which covers using my cssSandpaper JavaScript library to produce multiple blurred and un-blurred text-shadows in IE7+.<\/strong><\/p>\n<\/div>\n

\n

CSS3 + IE<\/p>\n<\/div>\n

When IE9 was released, I was really happy to see all the great CSS3 features it supported. 2D Transforms, advanced selectors, border-radius, rgba\/hsla colors, WOFF fonts … the list goes on. And no polyfills required! I was, however, disappointed that IE9 doesn’t support two of my favorite CSS3 effects: border-image<\/code> and text-shadow<\/code>.<\/strong> I’m sure that I will notice other CSS3 effects missing over time, but these are two features that I currently find incredibly useful. This article will deal with text-shadow<\/code>: how it works in browsers that support it, and strategies we can use today to emulate some of its functionality in IE. Although the solutions I present here are based on IE’s Visual Filters,<\/strong> and that some articles like this one by Neil Crosby<\/a> have looked into it as a solution, I present here some new information<\/strong> – how to make them work correctly with Windows Standard and ClearType font-smoothing and how to write the final CSS that won’t break any browser.<\/p>\n

How does CSS3 text-shadow<\/code> Work?<\/h2>\n

Before we go on about IE, let’s have a quick overview of how the CSS3 specification works. In all the other browsers (i.e. Firefox 3.0+, Safari 4.0+, Opera 10.0+ and Chrome 4.0+) text-shadow has pretty solid support. Its basic syntax is:<\/p>\n

\n
\r\n#obj {\r\n   text-shadow: <x-offset><\/em> <y-offset><\/em> <blur-radius><\/em> <color><\/em>;\r\n}\r\n<\/pre>\n<\/blockquote>\n
The x-offset<\/em> and y-offset<\/em> state how many pixels horizontally and vertically the shadow is positioned with respect to the original text, while the blur-radius<\/em> is used to express how much the shadow is blurred (the higher the value, the more blurry it is).  All of these values can be expressed using any CSS unit of measure (e.g. px<\/code>, em<\/code>, etc).  The color<\/em> can be any CSS color value, representing the color of the text.<\/p>\n
Here are some examples:<\/p>\n\n\n\n\n\n\n\n
Pure CSS Example (will be visible if your browser supports text-shadow<\/code><\/th>\nFirefox Screenshot (similar in other browsers except IE)<\/th>\n<\/tr>\n<\/thead>\n
text:shadow: 5px 5px 0px black;<\/td>\n\"Screenshot<\/td>\n<\/tr>\n
text:shadow: 5px 5px 5px black;<\/td>\n\"Screenshot<\/td>\n<\/tr>\n
text:shadow: 1px 0px 0px white;<\/td>\n\"Screenshot<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
You are not restricted to just one shadow.  You can have multiple shadows, separated by commas.  For example:<\/p>\n
\n
\r\n#obj {\r\n\ttext-shadow: \r\n\t\t 1px -1px 5px rgba(0, 0, 0, 0.2),\r\n\t\t-1px  1px 5px rgba(0, 0, 0, 0.2),\r\n\t\t 1px  1px 5px rgba(0, 0, 0, 0.2),\r\n\t\t-1px -1px 5px rgba(0, 0, 0, 0.2),\r\n\t\t 0px  1px 5px rgba(0, 0, 0, 0.2),\r\n\t\t 0px -1px 5px rgba(0, 0, 0, 0.2),\r\n\t\t 1px  0px 5px rgba(0, 0, 0, 0.2),\r\n\t\t-1px  0px 5px rgba(0, 0, 0, 0.2);\r\n}\r\n<\/pre>\n<\/blockquote>\n
renders white text legibly on a white background:<\/p>\n\n\n\n\n\n\n<\/tbody>\n<\/table>\n
Well … What About IE?<\/h2>\n
Currently, no version of Internet Explorer natively understands the CSS3 Syntax for text-shadow<\/code>. <\/strong> However, IE 4.0+ can do text-shadow-like effects using Microsoft’s proprietary Visual Filters<\/a> — unfortunately, if the user’s computer has any type of font-smoothing technology enabled, the DropShadow<\/code><\/a> Visual Filter effect is quite messy and ugly<\/strong>.  Since ClearType is enabled by default<\/a> in modern versions of the Windows operating system (i.e. Vista, Windows 7) and is very difficult to disable it in Internet Explorer 9<\/a>, this is a show-stopper. Don’t dispair, there is a workaround.<\/strong> Let’s see how DropShadow<\/code> is supposed to work, and see how we can “clean-up” the result to look much nicer in modern versions of Windows.<\/strong><\/p>\n
Basic Text-Shadow<\/h3>\n
Let’s first take a look at a basic text-shadow without any blurring of the shadow:<\/p>\n
\n
\r\n#basicTextShadow {\r\n\tbackground-color: white;\r\n}\r\n\r\n#basicTextShadow p {\r\n\ttext-shadow: 3px 3px<\/span> 0px #99cc99<\/span>;\r\n}\r\n<\/pre>\n<\/blockquote>\n
The equivalent Visual Filter syntax is:<\/p>\n
\n
\r\n\r\n#basicTextShadow {\r\n\tbackground-color: white;\r\n}\r\n\r\n#basicTextShadow p {\r\n\tzoom: 1;\r\n\tfilter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3<\/span>, Color=#99cc99<\/span>);\r\n}\r\n<\/pre>\n<\/blockquote>\n
Note that the zoom<\/code> line — it is here since it forces IE to recognize that the object “has layout”<\/a>.  Visual Filters do not work unless a node “has layout”.<\/p>\n
The problem is that when ClearType is turned on, many Visual Filters, including DropShadow<\/code> don’t render text very well:<\/p>\n
Pure CSS Example (will be visible if your browser supports text-shadow<\/code><\/th>\nFirefox Screenshot (similar in other browsers except IE)<\/th>\n<\/tr>\n<\/thead>\n
\nThis is white text on a white background\n<\/td>\n\"Screenshot<\/td>\n<\/tr>\n
\n\n\n\n
IE DropShadow<\/code> without ClearType<\/code><\/th>\nIE DropShadow<\/code> with ClearType<\/th>\n<\/tr>\n<\/thead>\n
\"IE\n<\/td>\n\"IE\n<\/td>\n<\/tbody>\n<\/table>\n
The text renders much better when you have a background-color<\/code>.  <\/p>\n
\n
\r\n#basicTextShadow p {\r\n\tzoom: 1;\r\n\tbackground-color: white;<\/span>\r\n\tfilter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);\r\n}\r\n<\/pre>\n<\/blockquote>\n
\"<\/a>
 IE using the DropShadow<\/code> Visual Filter with a background-color<\/code>.<\/p><\/div><\/p>\n
However, this will cause DropShadow<\/code> to behave more like the CSS3 box-shadow<\/code> property.<\/p>\n
How can we have the font render well without<\/em> the background-color<\/code>.  All we have to do is cut-out the background-color using the Chroma<\/code> filter<\/a>:<\/p>\n
\n
\r\n#basicTextShadow p {\r\n\tzoom: 1;\r\n\tbackground-color: white<\/span>;\r\n\tfilter: progid:DXImageTransform.Microsoft.Chroma(Color=white<\/span>)\r\n\t\tprogid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);\r\n}\r\n<\/pre>\n<\/blockquote>\n\n\n\n\n
Firefox using CSS3 text-shadow<\/code><\/th>\nIE with Chroma<\/code> and DropShadow<\/code> Filters Applied<\/th>\n<\/tr>\n<\/thead>\n
\"Firefox\n<\/td>\n\"IE\n<\/td>\n<\/tbody>\n<\/table>\n
The Chroma filter allows us to remove a specific color from the rendered element.<\/strong>  In this case, we are removing white, which is also the background-color.  As a result the font renders smoothly, and the DropShadow<\/code> filter behaves almost like a true text-shadow<\/code>.  This is similar to the method I describe in a previous article I wrote, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together<\/a>.  To sum-up: regardless of whether you use @font-face or not, you can make Visual Filters render text correctly by creating a background for the element, and then removing that background with the Chroma<\/code> filter.<\/p>\n
See the above three examples in action (IE is recommended in order to see the Visual Filter differences)<\/a><\/p>\n
Here is some actual HTML that is styled so that all browsers, including IE, will render a text-shadow correctly:<\/p>\n
\n
This is an example of a basic text-shadow.  Note that is looks almost the same in browsers that understand CSS3 text-shadow as well as Internet Explorer, which doesn’t.<\/p>\n<\/div>\n
Here is the CSS for “compliant” web-browsers:<\/p>\n
\n
\r\n#basicTextShadow p {\r\n\ttext-shadow: 3px 3px<\/span> 0px #99cc99<\/span>;\r\n}\r\n<\/pre>\n<\/blockquote>\n
And here is the CSS for IE (using Paul Irish\u2019s Conditional CSS Pattern<\/a>):<\/p>\n
\n
\r\nbody.ie6 #basicTextShadow p,\r\nbody.ie7 #basicTextShadow p,\r\nbody.ie8 #basicTextShadow p,\r\nbody.ie9 #basicTextShadow p {\r\n\tzoom: 1;\r\n\tbackground-color: #cccccc;<\/span>\r\n\tfilter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc<\/span>)\r\n\t        progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3<\/span>, Color=#99cc99<\/span>);\r\n}\r\n<\/pre>\n<\/blockquote>\n
There are some things that you should keep in mind with this solution:<\/strong><\/p>\n