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 reasonable looking text-shadow effect in Firefox. What’s more, In some configurations I can even make it look 3D!
Before we delve into the code I want to give you a little insight into how I came up with this text-shadow implementation. What a text-shadow basically is, is a blurred version of the text placed behind it (with or without a slight offset). This idea helped me implement text-shadow in IE by using the glow and blur filters it has.
For Firefox I had to go one step further. Firefox doesn’t offer glow or blur filters, So I had to rebuild them in another way. A blur, in essence, is the same image layered over itself for a number of times while expanding and with decreased opacity.
With this knowledge I set out and started experimenting in Firefox. The solution I came up with isn’t as clean as the IE solution, and by far not as clean as native text-shadow support. But it works, and that’s the point.
What it basically entails is: A text, an awful lot of spans, absolute positioning and opacity.
View the text-shadow example here. Or if you’re not using Firefox, here is a screenshot:
For each ‘layer’ of blur surrounding the text, I need 8 spans: one for each direction (top, left, bottom, right) and one for each combined one (top-left, top-right, bottom-left and bottom-right). I have chosen an arbitrary opacity level of 0.03, mostly because it looked better than the other options (YMMV)
This works until the lasts layer (which depends on your blur level. 4px blur = 4 ‘layers’ etc.) where you have a little trick to make it look better. The directional offsets extend one pixel more than the combined directional ones, giving a slightly sharper and better looking shadow.
You might say that it doesn’t look nearly as good as real, anti-aliased native text-shadow and you’d be right. But it looks fairly close and certainly looks good enough to be used.
All this markup cruft leads to problems when copying text: lot’s of duplicates. Using a bit of proprietary CSS we can prevent this: -moz-user-select:none;. Read more about it at Mozilla’s CSS reference. You will still have duplicate content when using CTRL+A which is a drawback but not one I have a solution for.
During my playing around with getting the looks right, I added a font-style:italic; to the <spans> and to my surprise it suddenly looked like this:
View the 3d-text-shadow example here
It looks like the text is standing on a plain and casting a shadow on it, quite neat in both the ‘regular’ and the knockout text-shadow effect. The effect seemed to work because the font-style:italic;‘s offset was located at the bottom middle.
As it turns out, the effect only works because of the font (times new roman) having a particular width for it’s italic’s. The effect doesn’t work with any other fonts, sadly.
I’ve developed a way to display text-shadow in IE and in Firefox, the only two major browsers that don’t support it yet. But in order for it to be really useful and not just a gimmicky proof-of-concept I plan on writing a jQuery plugin that does all the dirty handwork for you and sends normal text-shadow CSS to browsers that have it, the above implementation to Firefox and my IE text-shadow implementation to IE.
While I know these implementations are far from optimal and should be used sparingly, this should help you develop cool sites until Firefox 4 and Internet Explorer 9 (or 8‽) support text-shadow.
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
We can define easing curves for the transitions and animations on our websites to give them a more natural and subtle feel. But it’s not just animations that benefit from easing curves. Any time there is a transition between two states an easing curve will make that feel more natural and less harsh. For animations and…
For quite a while now I’ve had the idea to create a chatbot that works like one of those old-style text adventures like Zork. Recently I bumped into a free course on beginning a Facebook chatbot, and decided to really give it a go. The end result is A Messenger Adventure. Welcome to Adventure, a…
Your not just a wally, but a wally whos wasted your life… Why do this… its not even looking good, and why would any professional use this… Screen readers will make what of this?
Please go back to making useful CSS…
well that’s simple: because I can :)
Like I said in the article, this shouldn’t be sent to screenreaders in the first place, this should be used as progressive enhancement.
What would you consider useful CSS, anyway?
[…] Cross-browser text-shadow […]
@greg,
Experimental pushing of the envelope is a powerful thing. Perhaps this is not something that would/should be used in a real-world application, but pressing boundaries and unleashing creative solutions to problems opens up new possibilities. And, don’t be a jerk.
@killian,
Thanks for sharing. Take care.
[…] Cross-browser text-shadowCross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though. […]
Yuk!
Tag soup to emulate a CSS property. And it’s not even a graceful enhancement ( JS based ), it’s an accessibility mayhem.
[…] Cross-browser text-shadowCross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though. […]
[…] Cross-browser text-shadowCross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though. […]
thanks for your effort in trying to make this property cross-browser compatible. I’ve included your article in my overview-article about cool and clever text effects with text-shadow in my blog:
Make cool and clever text effects with css text-shadow
[…] to this article We’ll get text-shadow in Firefox 3.1. That makes for one dirty hack ready for the […]
Do you mean you could create something like this:
<b style="
display:block;
width: 8em;
height: 2em;
font: bold 160pt Georgia;
color:#ddd;
padding:.5em;
filter:
dropshadow(offX=1 offY=-2)
dropshadow(offX=2 offY=2)
shadow(strength=5)
blur(direction=45 strength=3)
blur(direction=135 strength=3)
">
Troy III
</b>
in IE 10 or 11?! :) (I’ve just wrapped it up from what I could remember from 11 years before ).
This is a previous century technology 1997 and it’s an ancient IE4 capability. (preview this in any IE4.01 &< ) do you think that browsers are at last (after 11 years) finally caching up with IE4?
Hello Troy,
I’ve fixed your html, so everyone can see it. Nice bit of code, it’s somewhat similar to what I tried with my IE solution.
Your code looks great at large font-sizes, but because all the effects are done on the text itself, instead of a duplicate behind it, it tends to blur the text too much, imho. Cheers for another solution though! :)
Very nice code!
Many thanks and greetings from Italy
Thanks for the example. While this may be not the most efficient HTML, I think you’ve stumbled onto some pretty cool ways to generate neat effects using pure HTML, CSS, and Javascript. Nice work and keep thinking outside the box.
I’m enjoying your exploration into this. I need to add some text-shadows to navigation text to avoid using images and it’s interesting to see the different methods you’ve explored so far!
Greg – your comment is irrelevant. I have a site that the text is going to go over the background of an image which I have made a bit transparent. This text fix is brilliant as it fits right over it and looks like its one image and easily readable. So it comes in use.
Great post.
I have not looked at your code (do I have to do a view source to see it) ?
Not sure how you are doing it, but II made a cross browser text shadow solution a bit ago that still works:
http://stansight.com/WordPress/2007/10/28/text-drop-shadows/
I wanted to focus on ease of implemention for the user, so I used unabtrusive javascript to dynamically create and position the CSS objects, but the funny thing is that after I made it I never ended up using it. :)
Great Codes, thanks from Texas.. :)
Haha ridiculous.
[…] Cross-browser text-shadow Cross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though. […]
[…] http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/ […]
Excellent work man! But there are some inaccuracies in my browser… IE6 mast die…
With greetings from Ukraine;)
Greg’s an idiot above! “Why would any professional do this?” Why don’t you go look at apple.com’s website css and then come back and tell us they are not a professional company.
Thanks Kilian!
[…] Cross-browser text-shadow […]
can any one give an shadow effect which must resemble metal finish….????
Hi!
Sir,
Plz send me Html tages………like………..Shadow Color Font….etc.
[…] Cross-browser text-shadow […]
Nice code! So dude, thanks and greetings from russia
Nice effect… but the example are not workin in IE8
I think this is what I was looking for… cross-browser script for text shadow.
I intend to make it in a way that it stands out from the background, will use it with the stronger background setting, not the blurred one…
Thanks a lot!
[…] be to use conditional tags and serve Internet Explorer users different stylesheets with either a cross-browser compatible hack or via the old school way with text rendered as images. If you don’t need the blur radius […]
This is very nice! … and I started using it for my private homepage which is not published yet.
However, I’m having some issues with IE9 when the text is inside a deep hierarchy of DIVs and a single one of the DIV parents has the attribute “overflow” being set to any value (even if I explicitly set it to the default ‘visible’).
In this case, the Glow() filter inside of the “span” style produces a solid black background in the complete area of the parent.
The background becomes transparent again when I remove either the Glow() filter or all the “overflow” settings for all parent DVIs.
It’s strange, because IE 7 or 8 don’t have this bug(?). So I had to change the condition check inside the HTML comment to [if lte IE 8]
IE9 users will not see any shadow… or maybe I use the DropShadow() filter in that case.
Any other suggestions? Thanks!
Mino
[…] be to use conditional tags and serve Internet Explorer users different stylesheets with either a cross-browser compatible hack or via the old school way with text rendered as images. If you don’t need the blur radius value […]