Follow up: Safari's text-shadow anti-aliasing CSS hack Notes
31st March 2009 at 7am 7 Comments Tweet a link to this on Twitter ↩
At the beginning of December I wrote an article about Safari’s text-shadow anti-aliasing CSS hack in-which I explained how you could use the text-shadow property to create a faux anti-aliasing effect just in Safari. It was later noted in the comments that this would no longer work in the latest versions of Firefox and Safari and indeed it didn’t, at least not very well anyway.
Rogie King has found a new method to alleviate this problem in the latest versions of Firefox and more specifically the Safari 4 beta. Instead of using a solid background colour Rogie explains that using a 99% transparent text-shadow colour creates the same result. E.g.:
text-shadow: rgba(0,0,0,.01) 0 0 1px;
Definitely check out Rogie’s article on this where he provides some visual examples and describes it in more depth; Safari’s text-shadow anti-aliasing CSS hack Revision.
Comments
Sam, thanks for linking me! I hope this can help us all. PS. Love your site design and LOVE this comment form!
Keep on rocking the free world!
Killer stuff. Thanks for paving the road of the bleeding edge highway. Someone’s gotta do it and that someone is YOU !!! :D
This didn’t work for me in Safari 4 until I changed it to:
text-shadow:rgba(0,0,0,0.01) 0 0 1px;
@Chris – You’re right, I have updated the code in the post accordingly. Thanks for letting me know.
We’ve had some success with:
-webkit-text-stroke: 0.5px transparent;
You can vary the thickness of the stroke to achieve various effects. Note that this disables sub-pixel anti-aliasing.
Wow this is great stuff!
Thomas – I was unaware the -webkit-text-stroke property was useable yet. Is that just for Safari or does it work in FireFox as well?
Awesome stuff either way.