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.
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.
This text should have a drop shadow.
and the CSS stylesheet:
...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>
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.
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
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.
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>
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>
Updated 2006-01-13 to use the corrected addEvent function.
Stuart Langridge, November 2002
kryogenix.org | other browser experiments