{"id":2946,"date":"2011-04-23T23:26:16","date_gmt":"2011-04-24T03:26:16","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=2946"},"modified":"2011-07-13T20:18:27","modified_gmt":"2011-07-14T00:18:27","slug":"css-blurred-text-shadow-in-ie-part-i","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2011\/04\/23\/css-blurred-text-shadow-in-ie-part-i\/","title":{"rendered":"CSS Blurred Text-Shadow in IE &mdash; Part I"},"content":{"rendered":"<div class=\"importantNotes\">\n<h3>Notes:<\/h3>\n<ul>\n<li>Before reading this article, you may want to read <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">my previous article<\/a>, which covers producing other text-shadow effects in IE.<\/li>\n<li>After reading this article, you may want to read <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/06\/29\/full-css3-text-shadows-even-in-ie\/\">my subsequent article<\/a>, which covers using <a href=\"https:\/\/www.useragentman.com\/blog\/csssandpaper-a-css3-javascript-library\/\">my cssSandpaper JavaScript library<\/a> <strong>to produce multiple blurred and un-blurred text-shadows in IE7+<\/strong><\/li>\n<li>When I first posted this article, I wrote that this solution works with IE8 as well as IE9.  However, further testing has shown that IE8 produces unpredictable results.  Please see the <a href=\"#caveats\">Caveats section<\/a> for more information<\/li>\n<\/ul>\n<\/div>\n<div id=\"intro\" class=\"alignLeft\">\n<p data-innertext=\"Blurred Text-Shadow in IE9 Without JavaScript\">\n     Blurred Text-Shadow in IE9 Without JavaScript<\/p>\n<\/div>\n<p>Last week, I discussed several strategies web developers can use to simulate CSS text-shadow in IE.  <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">In that article<\/a>, I mentioned that there was no way that I knew of to simulate text-shadow with a blur-radius in IE without JavaScript.  Since then, <strong>I have discovered a way to simulate the CSS <code>text-shadow<\/code> effect in IE9 that does not use JavaScript and does not add extra elements to the DOM.<\/strong> There are some other caveats to this solution, and because of this, I have titled this article &#8220;Part 1&#8221;, since I believe more work can be done in this area to improve support for blurred text-shadows in IE.<\/p>\n<h2>Step by Step Text-Shadowing in IE9<\/h2>\n<p>This solution makes use of <a href=\"http:\/\/paulirish.com\/2008\/conditional-stylesheets-vs-css-hacks-answer-neither\/\">Paul Irish\u2019s Conditional CSS Pattern<\/a>, and I would suggest reading that article first before proceeding any further.  I would also recommend reading my previous article, <em><a href=\"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">CSS3 Text-Shadow \u2013 Can It Be Done in IE Without JavaScript?<\/a><\/em>, since this solution relies on some ideas presented in that article.<\/p>\n<p>After you become familiar with the above two articles, implementing text-shadow in IE9 becomes a two-step process.<\/p>\n<p>For this tutorial, let&#8217;s assume the following HTML:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n&lt;div id=\"intro\" class=\"alignLeft\"&gt;\r\n  &lt;p data-innertext=\"Blurred Text-Shadow in IE9 Without JavaScript\"&gt;\r\n    Blurred Text-Shadow in IE9 Without JavaScript\r\n  &lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/blockquote>\n<p>(Note the <code>data-innertext<\/code> attribute in the element we want to add the text-shadow to.  This must contain exactly the same text that the element itself contains. We&#8217;ll explain why we need this later on).<\/p>\n<p>Let&#8217;s also assume we want a gray text-shadow with both an x- and y-offset of 3 pixels as well as a blur radius of 3 pixels:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#intro p {\r\n     text-shadow: <span class=\"hilite\">3px 3px<\/span> <span class=\"hilite2\">3px<\/span> <span class=\"hilite3\">#cccccc<\/span>;\r\n     width: 230px;\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>Let&#8217;s look at the result so far:<\/p>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th>Firefox screenshot<\/th>\n<th>IE screenshot<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/firefox-all.png\" alt=\"Firefox screenshot\" title=\"Firefox screenshot\"  \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/ie-1.png\" alt=\"IE screenshot without blurred text-shadow\" title=\"IE screenshot without blurred text-shadow\"  \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>As one would expect, works in Firefox but not in IE9.<\/p>\n<p><a class=\"exampleLink\" href=\"\/tests\/textShadow\/blur1.html\">See the above <code>text-shadow<\/code> code in action (without any IE9 goodness)<\/a><\/p>\n<h3>Step 1 &#8211; IE Blur Filter<\/h3>\n<p>Using <a href=\"http:\/\/paulirish.com\/2008\/conditional-stylesheets-vs-css-hacks-answer-neither\/\">Paul Irish\u2019s Conditional CSS Pattern<\/a>, we make an IE9 only rule that will blur the text<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#intro p {\r\n     text-shadow: 3px 3px <span class=\"hilite2\">3px<\/span> <span class=\"hilite3\">#cccccc<\/span>;\r\n     width: 230px;\r\n}\r\n\r\n\/* Step 1: apply the Chroma and Blur filter to the text you want the Drop Shadow on *\/\r\nbody.ie9 #intro p {\r\n\tzoom: 1;\r\n\tcolor: <span class=\"hilite3\">#cccccc<\/span>;\r\n\tbackground-color: <span class=\"hilite\">#ccccce<\/span>;\r\n\tfilter: progid:DXImageTransform.Microsoft.Chroma(color=<span class=\"hilite\">#ccccce<\/span>),\r\n\t        progid:DXImageTransform.Microsoft.Blur(<span class=\"hilite2\">pixelradius=3<\/span>);\r\n}\r\n\r\n<\/pre>\n<\/blockquote>\n<p>Note four things:<\/p>\n<ol>\n<li>I set the <code>color<\/code> to be the color of the text-shadow.<\/li>\n<li>We set a background-color to be halfway between the color of the text (black) and the visual background of the text (white).  In this case, I chose <code>#ccccce<\/code> since <code>#cccccc<\/code> is already being used by as the color of the text-shadow.<\/li>\n<li>We remove the background color with the <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms532982%28v=vs.85%29.aspx\"><code>Chroma<\/code> Visual Filter<\/a> (this is necessary to avoid the Blur filter from being pixelated, in the same manner as <a href=\"\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">the text-shadows in my previous article<\/a>).<\/li>\n<li>We apply the <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms532979%28v=vs.85%29.aspx\"><code>Blur<\/code> Visual Filter<\/a> to have a <code>pixelradius<\/code> of 3 (which is the same as the blur radius from the <code>text-shadow<\/code>.<\/li>\n<\/ol>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th>Firefox screenshot<\/th>\n<th>IE screenshot<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/firefox-all.png\" alt=\"Firefox screenshot\" title=\"Firefox screenshot\"  \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/ie-2.png\" alt=\"IE screenshot of text with Chroma and Blur filters applied\" title=\"IE screenshot of text with Chroma and Blur filters applied\"  \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a class=\"exampleLink\" href=\"\/tests\/textShadow\/blur2.html\">See the above code in action (IE9 will only show the blurred text)<\/a><\/p>\n<p>So now we have the shadow in IE!  But what about the solid text on top?<\/p>\n<h3>Step 2 &#8211; Use <code>:before<\/code> To Replace the Solid Text<\/h3>\n<p>We now must add one more selector in order to get our black, un-blurred text back:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n\/* Step 2: create a :before rule on the blurred text *\/\r\nbody.ie9 #intro p:before {\r\n  \/* color and width of the original text *\/\r\n  color: black;\r\n  width: 230px;\r\n\r\n\r\n  \/* This is needed to place the text directly over the shadow. *\/\r\n  position: absolute;\r\n\r\n  \/* This assumes that the data-innertext is the same as the text inside the element. *\/\r\n  content: attr(data-innertext);\r\n\r\n  \/* Positions the text *\/\r\n  margin-top: 0px;\r\n  margin-left: 0px;\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>The <code>:before<\/code> rule duplicates the blurred text, colors it black and places it before the blurred text.  The text is then duplicated because of the <code>content<\/code> property, which uses the value of the <code>data-innertext<\/code> attribute as the generated content &mdash; now you know why we set <code>data-innertext<\/code> at the beginning of this example.  It is absolutely positioned, and since the <code>top<\/code> and <code>left<\/code> properties are not set, it places the text on top of the original text.  Also note that the <code>width<\/code> is the same as the original element (in this case <code>230px<\/code>).  This is very important, otherwise the shadow will not appear below the text correctly. <\/p>\n<p>The only thing left to explain is the margins and how they position the text.  We must use these formulas to produce the x- and y- offsets of the original <code>text-shadow<\/code><\/p>\n<div class=\"equation\">\n<p><code>margin-left<\/code> = blur-radius &#8211; offset-x <\/p>\n<p><code>margin-top<\/code> = blur-radius &#8211; offset-y <\/p>\n<\/div>\n<p>Why do we need to do this?  Because adding the <code>Blur<\/code> filter pushes the text a few pixels from down and to the right &mdash; namely, the same amount of pixels from the blur-radius.  These simple formulas compensate for that, and place the shadows according to what you set for the x- and y-offsets.<\/p>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th>Firefox screenshot<\/th>\n<th>IE screenshot<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/firefox-all.png\" alt=\"Firefox screenshot\" title=\"Firefox screenshot\"  \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/ie-3.png\" alt=\"IE screenshot of simultaed text-shadow\" title=\"IE screenshot of simultaed text-shadow\"  \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>And now, let&#8217;s take a look at the difference close up:<\/p>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th>Firefox screenshot<\/th>\n<th>IE screenshot<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/firefox-zoom.png\" alt=\"Firefox screenshot\" title=\"Firefox screenshot\"  \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/04\/ie-zoom.png\" alt=\"IE screenshot of simultaed text-shadow\" title=\"IE screenshot of simultaed text-shadow\"  \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Note: the other browsers look about the same in Firefox, so I didn&#8217;t bother posting screen captures of them.<\/p>\n<p><a class=\"exampleLink\" href=\"\/tests\/textShadow\/blur3.html\">See the above code in action, with IE9&#8217;s blurred <code>text-shadow<\/code> workaround.<\/a><\/p>\n<h2 id=\"caveats\" name=\"caveats\">Caveats<\/h2>\n<p>This solution only works under certain conditions:<\/p>\n<ol>\n<li><strong>You cannot have more than one type of font, font-size, font-weight or font-style with the shadowed element.<\/strong>  This is due to the way we produce the shadow (i.e. the <code>data-innertext<\/code> cannot contain any HTML elements to control the style).<\/li>\n<li><strong>The shadowed element cannot be an <code>inline<\/code> element.<\/strong>  It can be a block or an inline-block though.<\/li>\n<li><strong>Any background colors or background-images that you want to appear in with the text-shadow must appear in an outside element.<\/strong>  For example, in the following HTML, you would put the <code>background-image<\/code> or <code>background-color<\/code> on the <code>&lt;div&gt;<\/code> tag, not the <code>&lt;p&gt;<\/code> tag which would have the <code>text-shadow<\/code>.<br \/>\n<blockquote class=\"code\">\n<pre>\r\n&lt;div id=\"intro\" class=\"alignLeft\"&gt;\r\n  &lt;p data-innertext=\"Blurred Text-Shadow in IE9 Without JavaScript\"&gt;\r\n    Blurred Text-Shadow in IE9 Without JavaScript\r\n  &lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/blockquote>\n<\/li>\n<li><strong>The shadowed element must be of fixed width<\/strong> (i.e. widths can be measured in <code>px<\/code>, <code>em<\/code>, etc.  <strong>Percentages will not work<\/strong>).<\/li>\n<li><strong>As far as I know, it is impossible to have multiple text-shadows on the same block of text.<\/strong>  If you wish to do this do glow text, you may want to look at my previous article, <em><a href=\"\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\" \/>CSS3 Text-Shadow \u2013 Can It Be Done in IE Without JavaScript?<\/a><\/em>.\n<li><strong>It only works in IE9.<\/strong>  When I originally posted this article, I claimed it worked with IE8, but after further testing, when setting a font on a <code>:before<\/code> rule, IE8 sometimes produces unpredictable results (sometimes, the font is set to something different than the original text, and other times, the letter spacing is not correct).  IE8 and lower are out of luck. :-(<\/li>\n<\/ol>\n<h2>An Open Challenge To Improve This Technique<\/h2>\n<p>Think you can do better?  I challenge you!  I am almost certain there has to be a better way with fewer restrictions that the solution I give here. I also know there are quite a few smart people out there who read this blog, so <strong>I am dropping the gauntlet and challenging everyone reading this article to help come up with a better solution.<\/strong>  Post a URL with an example below, and if I like what I see, I will post a follow up article to this one with what I believe are the best solutions. Here&#8217;s your chance to solve what I think is a huge web development problem and be recognized as Someone Really Clever&trade;.<\/p>\n<p>Unless, of course, I come up with a better solution first. :-)<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2011\/04\/introIE9.png\" \/> Last week, I discussed several strategies web developers can use to simulate CSS text-shadow in IE.  <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">In that article<\/a>, I mentioned that there was no way that I knew of to simulate text-shadow with a blur-radius in IE without JavaScript.  Since then, <strong>I have discovered a way to simulate the CSS <code>text-shadow<\/code> effect in IE9 that does not use JavaScript and does not add extra elements to the DOM.<\/strong><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,120,99,1],"tags":[107,104,105,218,108,102,100,53,44,103,101,52],"class_list":["post-2946","post","type-post","status-publish","format-standard","hentry","category-css3","category-ie-visual-filters","category-text-shadow","category-uncategorized","tag-blurred-text-shadow","tag-cross-browser-css3-text-shadow","tag-cross-browser-text-shadow","tag-css","tag-css3-blurred-text-shadow","tag-css3-text-shadow","tag-dropshadow","tag-ie","tag-ie-filters","tag-ie9","tag-internet-explorer","tag-visual-filters"],"_links":{"self":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=2946"}],"version-history":[{"count":93,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2946\/revisions"}],"predecessor-version":[{"id":3520,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2946\/revisions\/3520"}],"wp:attachment":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=2946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=2946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=2946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}