I'm using firefox and firebug to move the values from .1 to .9 and I can see the shadow move
The example agrees with you in Chrome, but in Firefox you can see the difference. Chrome must round the px value.. which tends to limit the coolness of the effect.
For cross browser you could set a base font-size, say 10px and then use EM's for the text-shadows. Would be like 0.01em for 0.1px for example. That would work cross - unless I'm mistaken.
I've used decimal px values on occasion, but on a whim I just tried it on text-shadow and was quite surprised at the result
Any thoughts on using decimal px values? It goes a long way towards making my text-shadows pop without looking over-bearing. -Michael
Unfortunately, it's not actually doing anything. If you replace 0.1px and 0.5px with 0px it will look the exact same.
Here's the example: http://codepen.io/ggilmore/pen/rybeL
And a screenshot: http://cl.ly/image/0r0q123a2v38 Top: decimals Middle: 0px Bottom: 1px
I'm using firefox and firebug to move the values from .1 to .9 and I can see the shadow move
The example agrees with you in Chrome, but in Firefox you can see the difference. Chrome must round the px value.. which tends to limit the coolness of the effect.
Ah yes, I was looking in Chrome. I'd imagine Safari and IE act similarly.
Firefox is dealing with sub-pixels. Not others major browsers as far as I can tell.
For cross browser you could set a base font-size, say 10px and then use EM's for the text-shadows. Would be like 0.01em for 0.1px for example. That would work cross - unless I'm mistaken.
Andddddd yes it works, just tried it with the above Codepen link from @TheDoc
Codepen results here http://codepen.io/andyunleashed/pen/vHGmC
However, not working in Chrome makes me think it's not worth doing. Sigh.
Very cool idea, @andy_unleash.