{"id":3296,"date":"2011-06-29T00:04:29","date_gmt":"2011-06-29T04:04:29","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=3296"},"modified":"2013-03-21T09:35:00","modified_gmt":"2013-03-21T13:35:00","slug":"full-css3-text-shadows-even-in-ie","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2011\/06\/29\/full-css3-text-shadows-even-in-ie\/","title":{"rendered":"Full CSS3 Text-Shadows — Even In IE"},"content":{"rendered":"
\nCSS3 &<\/span>
HTML5<\/span>\n<\/div>\n

In the last few months, I have written two articles where I discussed a few strategies to do CSS3-style transforms in IE<\/strong> (CSS3 Text-Shadow \u2013 Can It Be Done in IE Without JavaScript?<\/a> and CSS Blurred Text-Shadow in IE \u2014 Part I<\/a>). While demonstrating the possibilities to creating a varied range of text-shadows in IE, there wasn’t any silver bullet that produced what I considered one of the Holy Grails of CSS polyfills: a method that could take an existing page and render multiple CSS3 text-shadows in IE<\/strong> with few, if any, changes to the CSS code. To that end, at the end of my last article, I dropped the gauntlet at the end of my last article and challenged the web development community to help come up with a better solution. I got a few takers, but one stood out from the rest. Kazumasa Hasegawa<\/a> submitted his script and blog post (in Japanese<\/a> and then in English<\/a>) about his script that could do exactly what I asked: full CSS3-style text-shadowing in IE.<\/strong> It can do multiple blurred and unblurred shadows per block of text. The only caveat is that one would have to set the CSS selectors inside a JavaScript file. However, the code was extremely well written, and it was very easy for me to refactor it to become a plug-in for my CSS3 polyfill library, cssSandpaper<\/a>. Now, all a developer has to do now is include a few <script><\/code> tags into the <head><\/code>, and BAM!!! — instant text-shadow goodness in IE7+.<\/strong><\/p>\n

Yeah Whatever! Show Me Proof!<\/h2>\n

If you are viewing this page in IE7+, here are the droids you are looking for:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\nLive CSS\/HTML\n<\/th>\n\nIE9\n<\/th>\n\nFirefox\n<\/th>\n\nText-Shadow Syntax
\n<\/tr>\n<\/thead>\n
\nSimple<\/strong><\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n2px 2px 0 #E51919\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nBlurred<\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n3px 3px 3px #B24C4C\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nEtched<\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n0px 1px 0px white\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nFlaming<\/span>\n<\/td>\n\"\"<\/td>\n\"\"<\/td>\n\n
\r\n0px   0px  4px white,    0px  -5px  4px #FFFF33,\r\n2px -10px  6px #FFDD33, -2px -15px 11px #FF8800,\r\n2px -25px 18px #FF2200 <\/pre>\n<\/td>\n<\/tr>\n
\nNeon<\/span>\n<\/td>\n\"\"<\/td>\n\"\"<\/td>\n\n
\r\n0 0 1px  #ffffff, 0 0 2px  #ffffff,\r\n0 0 3px  #ffffff, 0 0 4px  #ff00de,\r\n0 0 7px  #ff00de, 0 0 8px  #ff00de,\r\n0 0 10px #ff00de, 0 0 15px #ff00de;\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nUnfocused<\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n0 0 3px #fff\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nGlowing<\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n0 0 20px yellow, 0 0 60px yellow\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nEmbossed<\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n-1px -1px white, 1px 1px #333333\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nPillow<\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n1px 1px white, -1px -1px #444\r\n<\/pre>\n<\/td>\n<\/tr>\n
\nFake 3D<\/span>\n<\/td>\n\n\"\"\n<\/td>\n\n\"\"\n<\/td>\n\n
\r\n1px 1px rgba(255,128,0,.7), \r\n2px 2px rgba(255,128,0,.7),  \r\n3px 3px rgba(255,128,0,.7), \r\n4px 4px rgba(255,128,0,.7),\r\n5px 5px rgba(255,128,0,.7)\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
(Note that the Blur example does not appear correctly in IE7 and 8, due to lack of support of the transparent<\/code> color)<\/p>\n
These examples were inspired by these excellent examples on the web:<\/p>\n