Sam Brown

Follow up: Safari's text-shadow anti-aliasing CSS hack

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.

Post a link to this on Twitter ↩

Comments

Rogie King 31 March 2009, 21:09 #1

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!

Sam Brown 2 April 2009, 09:12 #2

Thanks Rogie, no problem at all. Good work on finding a cure!

Brente 6 April 2009, 06:52 #3

Killer stuff. Thanks for paving the road of the bleeding edge highway. Someone’s gotta do it and that someone is YOU !!! :D

Chris Cantey 16 April 2009, 09:46 #4

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;

Sam Brown 17 April 2009, 01:24 #5

@Chris – You’re right, I have updated the code in the post accordingly. Thanks for letting me know.

Thomas Fuchs 12 June 2009, 07:13 #6

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.

Jordan Dobson 13 June 2009, 16:39 #7

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.

Commenting has closed for this article. Feel free to me.

Sam Brown co-founded Iterate, and was previously VP of Design at Foursquare. Based in NYC.

DribbbleEndorseFacebookFoursquareInstagramTwitter