Drop shadows

Drop shadows are a nice technique that can be applied to text. Here's an example (which is an image):

An example of text with a drop shadow

This effect can be created in Internet Explorer using one of the Microsoft proprietary filters, which is documented at MSDN. However, the object to which you are applying the shadow must "have layout", by which is meant that it must be absolutely positioned. Moreover, it's not standards-compliant (and hence your CSS will not validate), and it will only work in Internet Explorer.

A cross-browser solution

There are plenty of cross-browser versions of a drop-shadow; BodyTag have a nice example. These, however, all seem to require you to add your shadowed text to your page twice, and manually position the second text above the first with CSS positioning. Any time you see any kind of laborious task like this, it's possible that it might be worth automating it. And so it is with this.

What we want is an unobtrusive DHTML solution. Simply include a JavaScript library and a CSS stylesheet in the header of your page, and then set all containers that contain text you'd like to be shadowed to have class "dropshadow", and the code does it all for us, as per this example (which is not an image):

This text should have a drop shadow.


Your <head> should contain these two lines, to pull in the JavaScript library and the CSS stylesheet:

<script src="aqdropshadow.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="aqdropshadow.css">

...and then you simply add "dropshadow" to the CLASS of your shadowed element. The above example has code:

<p class="dropshadow demo">
This text should have a drop shadow.

Notes on usage

An important note

There is one very important point to be made. Above, in the example, you'll note that the <p> has two styles, "dropshadow" and "demo". The "dropshadow" style is defined in the dropshadow CSS stylesheet, and it's defined as empty. The key point here that you need to know is that the style you define on your element (the <p> in this example) defines the shadow, not the colors of the actual element itself. So if you've got a red page with white text, and you want one paragraph to have a yellow drop-shadow, then you need to define the colours on that paragraph to be yellow, because that's the colour of the text's shadow, not white to be the colour of the text. This seems a bit complex to think about, but the way to envisage it is that the thing that's in the body of your page is the shadow, and the text floats a little above and to the left of it.

Customising your colours

As said above, the styles that you apply to the element in the body of your page (to which you give the "dropshadow" class) are applied to the text's shadow. The text itself is defined to appear in white by the stylesheet, but this will be overriden by inline STYLE attributes on your element. You can override this in turn by adding a textColour="colour" attribute to your element, which will define the text's foreground colour. Note that this will cause your code to cease to validate, so it's a workaround; you could also edit the stylesheet for compliance.


Example 1

This text should be in white, with a black dropshadow, on a red background.

This is a fairly standard example. Note how the shadowed area inherits the default colours for the page -- text in black -- and this black colouration applies to the shadow. The dropshadowed text itself is in white, which is the default colour for text in a dropshadowed element.

<p class="dropshadow" style="background-color: red">
This text should be in white, with a black dropshadow, on a red background.

Example 2

This text should be in yellow, with a red dropshadow, on a black background.

In this example, we've applied a colour directly to our dropshadowed element with an inline STYLE sttribute. As before, that colour applies to the shadow, but, because it's inline style, it will also apply to the dropshadowed text itself (which would mean that the text and its shadow are the same colour). So we use the textColour attribute to override this with a colour of our choice, in this case yellow.

<p class="dropshadow" style="color: red; background-color: black" textColour="#ffff00">
This text should be in yellow, with a red dropshadow, on a black background.

Example 3

This is in a div. The dropshadowed part below is contained within a div within this div.
This text should be in white, with a black dropshadow, on a red background.
We're still in our div here, but this comes after the dropshadowed div.

Updated 2006-01-13 to use the corrected addEvent function.

Stuart Langridge, November 2002

kryogenix.org | other browser experiments