Cross-browser text-shadow
With my discovery of almost cross browser text-shadow something kept nagging me: It didn't work in Firefox. A couple of days ago I went back to my experiments and succeeded in a re…
(Almost) Cross browser text-shadow
Update: I have written a jQuery plugin that takes care of text-shadow in Internet Explorer, you can read the article here: Text-shadow in IE with jQuery
Text-shadow is a neat little CSS3 (actually, CSS2) property that allows you to display a shadow behind your text. The only downfall is that it doesn’t work in Firefox and Internet Explorer. I decided to fix that problem. Well, half of it. I made it work in…
Internet explorer!
Bet you didn’t see that one coming, did you? Internet Explorer has a neat thing called “filters” which are basically filthy javascript implementations in CSS. They have a whole slew of them, including shadow. But we’re not using that because it’s very ugly:
h1 {filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45);}
See, you don’t want that in your page, you want something looking good like this text-shadow in safari 3:
h1 {text-shadow:#000 0px 0px 3px;}
This, of course, looks much much better.
Exit shadow, enter glow and blur
When you look at the text-shadow effect in Safari or Opera 9.5, you can see that the shadow is basically a blurry version of the text that fades away at the edges. So we have to find a way to emulate that in Internet explorer. Thanks to two filters we can emulate it: Glow takes care of expanding beyond the text but is a bit crude on its own, so we add a slight blur to it to soften it up a bit.
filter:
progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')
;
When we add these filters to some text it looks nice and shadow-y, but we lose the the text itself.
It gets ugly here
In order for it to work, we need to find some way to place the same text over the blurred text. For that to happen I added an additional span inside the element.
When we keep the filters on the element, the span inside the element gets blurred as well, with no way of turning that off. So we have to switch it around: we place the filters on the span.
From here on some creativity is needed: We need to place the span directly under the original text. We do this by absolute positioning, a negative z-index and a bit of guesswork regarding the placement.
The Result
From there on I just cleaned it all up, hid the extra span for all other browsers using conditional comments, added a knock-out version and the end result looks like this:
Check out the example (in Internet Explorer), the CSS is fully commented for your dissection and understanding.
Discussion
There are some points of discussion of course.
The Firefox problem
If you’ve gotten till here, you might wonder why Firefox is missing from this article. That’s because it currently doesn’t support text-shadow. There is an extention available, though.
Semantics and all that
The span’s, while nicely hidden using conditional comments, would probably be better off added with javascript, just for cleanliness. The same goes for all the proprietary CSS, add it in a special CSS stylesheet and include it using conditional comments to keep your main stylesheet valid and not bother smarter browsers with invalid CSS.
That’s it, have fun with this bit of code! (My way of saying: code in public domain)
Related articles
Text-shadow in IE with jQuery
With the soon-released FireFox 3.1, three of the four major browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. I have already taken care…
Random CSS Thought: CSS Conditional comments.
Internet explorer has quite some odd ways to render my CSS. Luckily, the IE Team developed a way to hide certain parts of your HTML for other browsers: Conditional Comments. The on…
The idea is very nice, a very large part of the users can see the nice text shadow. Be careful with a text color equal to the background color, like your example.
I think the best solution is a small JavaScript that can check witch elements use the text-shadow, and then generate the duplicate content and the shadow with the same color and offset as set in the
text-decorationproperty. Wouldn’t be the most difficult JavaScript to code. (Of course the JavaScript is inserted by a conditional comment.)Nice info, I didn’t know about this opportunity.
About your example – I tested it with Opera 9.10 and it seems to me that text-shadow is not supported.
Or you could just use sifr to do the same thing (and have the added advantage of any font you like).
Yes it’s arguable that this is certainly not the most elegant solution, but it does solve most of the problems presented above and comes with the added benefit of being a great deal more configurable.
http://dev.novemberborn.net/sifr3/beta2/demo/
[…] KilianValkhof.com » Blog Archive » (Almost) Cross browser text-shadow Text shadowing using CSS2 and 3 techniques with those IE filters fo fill in the gaps (tags: css webdesign typography tutorial) […]
Liam, you are right, it would look better with sIFR, but that adds flash to the game. This uses only browser-native functionality.
Also, another minor plus point: when you select the knock-out tekst in my example it remains readable. not-so in sIFR ;)
[…] my discovery of almost cross browser text-shadow something kept nagging me: It didn’t work in Firefox. A couple of days ago I went back to my […]
[…] browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. I have already taken care of that problem, but decided to wrap it up in a nice automated jQuery […]
[…] 3. Cross browser text-shadow […]
Just a note, that this example works in Firefox 3.1 beta, meaning that the developers have incorporated the shadow feature. I think you can feel free to add that to the list of supported browsers on the example page.
[…] CSS text-shadow in firefox and internet explorer until css3 fully supported… […]
[…] 3. Cross browser text-shadow […]
[…] The filter non-standard property, which have been created by Microsoft, can fix some compatibility issues of IE 6, 7 and 8. This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow. » Read tutorial […]
[…] The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8. This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow. » Read tutorial […]
[…] التاسع منه لن يدعم خاصية ظل النص Text Shadow فحتى مع وجود بعض الحلول التي تعوض عن عدم وجود الخاصية في الإكسبلورر فإن […]
[…] The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8. This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow. » Read tutorial […]
[…] The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8. This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow. » Read tutorial […]
[…] The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8. This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow. » Read tutorial […]
There is “strength” property, in shadow filter, so you can do
text-shadow: 2px 2px 4px #555555;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#555555,direction=135,strength=4);
and it looks almost the same :)
Cool! It’s work for me. First, it’s hard to control, but thanks to Honza for your comment, very helpful.
[…] же есть Drop Shadow Filter. Конечно выглядит это, мягко говоря Ужасно В большинстве случаев «модные парни» прибегают […]
[…] work with Firefox, Safari and Chrome. There are workarounds for Internet […]
[…] The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8. This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow. » Read tutorial […]
[…] The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8. This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow. » Read tutorial […]
Ohhh don’t you just love Micro-bloody-soft and the fact that they are seemingly incapable of doing ANYTHING intelligent or useful for their users, despite having $50bn in the bank ¬¬
[…] 55. Cross browser text-shadow […]
[…] Будет несправедливо не заметить, что в IE все же есть Drop Shadow Filter. Но выглядит это ужасно. […]
[…] 55. Cross browser text-shadow […]
[…] 55. Cross browser text-shadow […]
Cool!!! Спасибо!!! Thanks!!!
http://ironscorpio.my1.ru/ Мир ВебМастера
http://embroideryland.ru/ Designs of a machine embroidery
[…] browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. I have already taken care of that problem, but decided to wrap it up in a nice automated jQuery […]
[…] for IE9 and making shadows with those DXImageTransform.Microsoft.Shadow-stuff which in the end just looks horrible. So even IE 9 won’t have it included.But with Firefox 3.1 including text-shadow all major […]
I have been using a filter similar to this that looks almost exactly like the CSS3 text shadow.
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,strength=3,direction=120)
By adding “strength=0” to the shadow filter you can reduce the size of the shadow, Works in IE9. Adjust the the strength between 1 and 5 for best results.
[…] 55. Cross browser text-shadow […]
[…] work with Firefox, Safari, Chrome and Opera. There are workarounds for Internet […]
[…] 55. Cross browser text-shadow […]
[…] …where it is styled with this CSS (courtesy of this IE drop shadow technique): […]