The shadow of the invisible: AKA How to create fuzzy fonts with pure CSS

{,}
October 7th, 2010

No, I wasn’t drunk writing this post, just had a long hot shower.

No, you don’t need new specs, this text is slightly blurred.

Scrubbing my back I was thinking about the new CSS3 stuff, and what you can do about spicing up the layout.

After my hot shower, steam filling my bathroom, I looked at myself in the mirror, razor-blade in hand to deliver a fast and clean shave.

Stop!

No shaving in the mist, no blood in the tub, but EUREKA
Fuzzy fonts with CSS!

How?

Easy as a shower, some text-shadow with no offset and set the shadow-color to font-color and set font-color to transparent.
That’s all.

I tried it before, by setting font-color to transparent, but that didn’t work in my standard Opera browser: how can things be invisible but still have a shadow? Like the devil in reverse, isn’t that God BTW?

But you can trick Opera by using RGBA, and set full transparency.

Other browsers like Chromium or Firefox don’t have any problems with the devil, god or the sun shining on invisible things and leave traces.

The internet is a mysterious world.

The CSS for fuzzy or blurred  fonts:


#post-656{
text-shadow:0px 0px 4px #000;
color:transparent;
color:rgba(255,255,255,0);/* Opera hack */
}
#post-656 p:hover {
text-shadow:0px 0px 1px #000;
}

Hmm waiting for a new jQuery enriched fading effect. or I will give it a try later.

Hey, what the heck why javascript, CSS transformations can do the trick.

No, Microsoft lovers, no fun for you yet, MSIE 9.0 will give you candy, but unfortunately you can’t read this text. ;)

Tags: ,

Leave a Reply