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
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.
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.