Dave Woods - Freelance Web Design Warwickshire

CSS Dropshadows

I’ve not written anything about CSS3 for a while so have taken the opportunity today to write a short post on the text-shadow property, how it works and what browsers currently support it.

Now, before you get all excited, this has actually been in the spec since CSS2 but has so far only been supported by Safari (since version 1). However, the latest release of Opera 9.5 now supports the text-shadow property so may be useful to use as progressive enhancement for uses of those browsers that support it.

A CSS Dropshadow Example

In Opera 9.5, Safari 3, Konqueror and iCab this text will render with a drop shadow.

For those of you without access to any of the above browsers, here’s a screenshot of how the dropshadow would appear to a user browsing in Safari

dropshadow.gif

The Code

#textshadow {
color: #333;
background-color: #FFF;
text-shadow: 3px 3px 5px #666;
}

The first value in the text-shadow property is used to determine the text shadow’s position from the left of the original text whilst the second value sets the vertical position. Negative values can be used to shift the shadow left or up if required.

The third value determines the size of the text-shadow with a value of zero making the shadow crisp whilst a higher value will make the shadow more fuzzy.

The fourth value is obviously the hex value for the colour that the dropshadow will appear in.

Summary

The use of this is obviously currently very limited as the proportion of Opera or Safari users is relatively small in comparison with the Internet Explorer and Firefox market but it’s something I’d consider using for those users who are lucky enough to be using a browser that renders text-shadows.


10 comments on “CSS Dropshadows

  1. bloid

    I was playing with this this morning…

    By using something like:

    a:hover {
    text-shadow: 0px 0px 6px #F00;
    }

    You can get quite a nice glow on links when the mouse is over them

  2. Dave Post author

    Hi Jermayn, I certainly wouldn’t suggest using something like this for huge blocks of text as it would cause problems but for things like heading’s that are quite large in size then I think it could add a nice touch to a site without the need to use images.

    Obviously it’s all in the designers hands though and it will be no doubt be misused but I’m sure in the right hands it will be used correctly.

  3. Dave Post author

    @fluminis – Not really. It’s in the CSS spec and I’d expect it to be supported in ALL browsers over the coming years so isn’t something that a couple of years from now won’t be used anymore.

    It’s something that we can start using now for the most standard compliant browsers whilst it will also take effect when the other browsers catch up and implement it.

    If designers start using various CSS elements to enhance their design which are in the CSS spec then hopefully the manufacturers will prioritise these features in the next release of the browsers.

    As long as it’s used to enhance the design and not for creating drop shadows for white text on a white background for example, then there’s no negative side to using this method.

  4. Anjanesh

    You think FireFox and IE would support this by 2008 ?

    Pointless to make use of these unless FF & IE render them too.
    Even if things are supported in the newer versions of FF & IE, atleast we can notify the users to download the latest – IE7 now not asking for validation.

  5. Dave Post author

    It’s unlikely to be in Firefox 3 unfortunately and I very much doubt that Internet Explorer will be ahead of Firefox so I’m afraid it won’t be any time soon.

    However, it’s not completely pointless as providing something to users of further advanced browsers helps to ensure that other browsers implement these features sooner rather than later so it’s perfectly valid to make use of CSS3 features as long as you’re using it to enhance the presentation and aren’t relying on it for display purposes.

  6. Tim Wall

    Very interesting. Thanks for taking the time to point this out. I see your points about the value of implementing this even now. Hopefully it will be more supported soon.

  7. Pingback: The Geeky Blog Updates » Blog Archive » CSS Dropshadows