// February 26th, 2008 // 2 Comments » // Internet, Technology
I tweaked around the blog some more and decided to add a nice text-shadow to the headlines. If you’re using a 3rd-world browser, you probably wont see it though, it’s a Safari only supported CSS thing.
Now don’t get me wrong, I’ve been using FireFox myself for quite some years, hell, we even organized a release party for it back in, uhm, 2003? for the very first release in Heidelberg, Germany.
But when digital friend Ben introduced me the Safari plugin Saft, I tried it out and sticked with it, never looking back. Safari & Saft together kick the Fox really in the nuts. It has so many features, check it out here. It costs near to nothing for all the brilliant features offered and is a must-have for serious bloggers and surfers.
The thing is that Safari makes websites look so much better by using some kind of anti-aliasing on the text. If you surf a lot and read a lot it’s so much more comfortable.
Anyway, back to the CSS. So how do you use the CSS declaration in your style sheet?
Here are some examples.
You can only read this with Safari.
Above paragraph uses the following text-shadow settings: text-shadow: #000 0px 0px 3px; color:#fff;.
How about a red shadow?
Above paragraph uses the following text-shadow settings: text-shadow: #f00 2px 2px 2px;.
Elegant headline shadow needed?
Above paragraph uses the following text-shadow settings: text-shadow: #aaa 1px 1px 1px;.
Here’s some shadow above the text…
Above paragraph uses the following text-shadow settings: text-shadow: #666 0px -5px 1px;.
Blue shadow far off? No problem!
Above paragraph uses the following text-shadow settings: text-shadow: #00f 15px 15px 3px;.
Last example: Extreme blurred shadow!
Above paragraph uses the following text-shadow settings: text-shadow: #6f0 3px 3px 5px;.
Nice, right?
It’s quite easy to apply, generally you have four values to set up your shadow:
1. First you set the color of the shadow. #f00 for red, #0f0 for green and so on. Any hex color is possible.
2. Now you set the horizontal space to the text (the x-axis), 5 pixels for example (5px). Can be any number, I suggest using px here.
3. Then the vertical space relative to the text (the y-axis), 3 pixels for example (3px).
4. The last setting is the amount of blur that the shadow should have. A value of 0px gives the shadow no blur at all while any setting over 5px makes the shadow completely unreadable. I suggest a setting between 1px and 3px.
Oh, and Safari is also available for Windows now, if you want to give it a try… Download the beta here!
As you can see (if you use Safari), this is quite a cool declaration and quite useful for styling headlines and such without having to use images. If only other browsers would support it, too…
Let’s see what the future brings!
I just realized, while downloading the update for Perian 1.1, that I had never recommended it before: It calls itself the “swiss-army knife for QuickTime” and it has all the reasons to do so! Perian enables QuickTime application support for additional Media Types like FLV (used by 
