Complex CSS Text-Shadow and cross browser compatibility

By : ParoX
    <style type='text/css'>
    	body {
    		font: 100% myriad, arial, sans-serif;
    		font-size: 12px;
    	.shadowtext {
    		text-shadow:-0.1em 0 0.1em #626262, 0.1em 0 0.1em #626262, 0 -0.1em 0.1em #626262, 0 0.1em 0.1em #626262;
    	.shadowtext_text {
    		text-shadow:0 0 0.3em #000
    <DIV class="shadowtext">0 %</DIV>	
    <DIV class="shadowtext">10 %</DIV>	
    <DIV class="shadowtext">25 %</DIV>	
    <DIV class="shadowtext">95 %</DIV>	
    <DIV class="shadowtext">0123456789</DIV> <br>
    <DIV class="shadowtext_text">0 %</DIV>	
    <DIV class="shadowtext_text">10 %</DIV>	
    <DIV class="shadowtext_text">25 %</DIV>	
    <DIV class="shadowtext_text">95 %</DIV>	
    <DIV class="shadowtext_test">0123456789</DIV>	

I am trying to get shadowtext_test to mimic the look of the text-shadow of shadowtext, without the over complicated longness. Anyone have any ideas?

Also... I want it to look about the same on all browsers, or atleast IE7, IE8 and older firefox. Anyone know the best way to approach this. I didn't see an easy way to do multiple blurs/shadows/glows on IE using filter.

By : ParoX


First question:

you are really at the mercy of the browser to determine how the shadow gets rendered, and since the browser is concentrating most of the color right under the numbers, there isn't much you can easily do to darken it. Your initial approach is probably the most straight-forward. If anything, I would be a little more verbose to ensure the text glow was evenly distributed:

text-shadow: #777 0 0 0.1em, #777 0 1px 0.1em, #777 1px 1px 0.1em, #777 0 1px 0.1em, #777 -1px 1px 0.1em, #777 -1px 0 0.1em, #777 -1px -1px 0.1em, #777 0 -1px 0.1em, #777 1px -1px 0.1em;


The text-shadow css2 property is not supported in several browsers, including IE or Firefox (prior to 3.5). There are hacks to get it to work in those browsers, but they aren't always pretty.

You can use an IE filter property to add support for IE; here's a decent tutorial:

Support for older versions of Firefox is a lot trickier, since any workaround you created would need to be hidden from Safari. If this is an issue, I could possibly suggest something.

Here is a list of browser support for css propoerties, if that would help you make your decision:

The jQuery solution that Alexander Corotchi links to implements the available css solutions without resorting to hacks.


I've been thinking about this some more; here are additional thoughts:

The real problem is that you are trying to use the text-shadow property to recreate the effect of the css3-spec text-outline property (which has yet to be implemented by any of the browsers). Any solution you come up with will probably be less than ideal unless you can wait for the text-outline property.

It might be possible, though, to create an alpha-channel png and then use additional markup (or javascript) to make it the background for each character. You'd have to carefully control the dimensions of your text, but that could be a possible cross-browser solution (except for IE6 which doesn't support alpha transparency very well).

Believe me, it would be better if you go ahead with this jQuery plugin (Link no longer valid.). Because, we had tried doing it the CSS way, and we were almost dead trying to make it work the same in IE6/IE7/IE8/FF2/FF3/Safari :DOH:


As a side note, we weren't 100% successful in making this work using CSS and HTML tweaks in ALL the browsers ;( So, according to me, scripting is a way to go. You can try the jQuery library I've mentioned or you can use the one mentioned by Alexander

By : Kirtan

This video can help you solving your question :)
By: admin