Alan Hogan

Things Alan Hogan feels like sharing.

These are my comments on music, movies, books, web development and programming, Mac tips, and life in general. Enjoy!

•

Fri Jun 11

simurai:

Update: Ohh.. snap. Some friendly people on twitter pointed out that there is actually an even simpler way to create Text Blur. So before this get’s too embarrassing, I quickly should change the code below. ;-) By using just color instead of -webkit-text-fill-color it also works in Firefox (although the blur looks a bit stronger). Thanks for telling.
I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur.
color: transparent;text-shadow: #fff 0 0 100px;
That’s it! And if you animate it, it get’s even sexier.
See the Demo (Chrome/Safari only)

Sexy.

Update: Ohh.. snap. Some friendly people on twitter pointed out that there is actually an even simpler way to create Text Blur. So before this get’s too embarrassing, I quickly should change the code below. ;-) By using just color instead of -webkit-text-fill-color it also works in Firefox (although the blur looks a bit stronger). Thanks for telling.

I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur.

color: transparent; text-shadow: #fff 0 0 100px;

That’s it! And if you animate it, it get’s even sexier.

See the Demo (Chrome/Safari only)

Sexy.