Drop shadows
Drop shadows are a nice technique that can be applied to text. Here's an example (which is an image):
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.
Code
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. </p>
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.
Examples
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. </p>
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. </p>
Example 3
Updated 2006-01-13 to use the corrected addEvent function.
Stuart Langridge, November 2002