Skip navigation.

Harold's Home

   Home
  
XML version of this site

PHP Scripts

Index
CLI fun
Mail on 404
HB-NS (NewsScript)

Downloads

Applescripts
APOD to Desktop
Dreamweaver Extensions

Stuff

Writings
Other stuff
Central Grinder

OOOk Default:

VJ stuff
VJ Tools
Bananas
Strippers
Sample Movies

News

Text-shadow
While we're on the topic of webdesign (about which I haven't posted in quite a while and I apologise for that) we might as well tackle the tricky subject that's captured my heart lately.

It's the text-shadow property of CSS2. This is a tricky subject because as far as I know the only browser that handles this Safari.
However, you can still use this effect to generate some content that's quite good-looking and doesn't break in less compliant browsers, as long as you choose your colours right.

Here's the CSS2 code I use for my site's headline:
h1 {
    font-size: 150%;
    color: #CCC;
    text-shadow: #300 2px 2px 1px;
}

h1 span.glow {
    font-size: 80%;
    position: relative;
    top: 10px;
    color: #ADADAD;
    text-shadow: #000 0px 0px 2px;
}


Here's the code of the HTML at this moment (the "speaking of bananas..." part is generated dynamically and might change as soon as think of a new cool tagline):
<h1>Harold's Home<span class="glow"> Speaking of bananas...</span></h1>.

And here's how it looks in Safari:
text-shadow as applied on my H1 element in Safari
Here's how it looks in Firefox:
text-shadow as applied on my H1 element in Firefox

A text-shadow property in CSS is a bit weird.
It accepts a colour, two offsets (one to the left and one to the bottom, use negative values to go to the right and/or top) and a blur radius. Set both offsets to zero and the blur acts a bit like a gaussian blur on an inverse selection in photoshop.

I'll be the first to admit that it looks slightly uninspiring in non-compliant browsers but then I don't make my money designing this website. For clients I am much more conservative. (I work in Dutch education where IE 6 for Windows is the lowest common denominator, although I used it a few weeks ago for a mac-only tutorial, helpviewer uses the same rendering engine as Safari.)

In browsers that do not understand the text-shadow property (like Firefox 0.8, IE 5 Mac and IE 6 Windows) this element is ignored, so be careful which text colour you choose as this can lead to the disappearance of the entire text.
In the mean-time, if you use this effect to enhance your website and choose your colours right you can give Safari users a better-looking experience and be ready for the next browser to support this.

Here's the official W3C documentation: CSS Text shadows.
Enjoy!

Show all items | Read all items

About, copyright, privacy and accessibility | Mail