Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

DropShadow

Use the DropShadow filter to apply drop shadows to text. It means you no longer need to use a graphics package to turn text into a graphic to create this effect.

You can specify:

  • The colour for the drop shadow effect
  • The horizontal and vertical off-set of the shadow (offX and offY). Positive numbers move the shadow to the right and down. Negative values to the left and up
  • Whether to create a drop shadow of non-transparent pixels (a value of zero) or transparent pixels (a value on non-zero)

Note: If you use DropShadow on text, you also need to specify a font size and family.

For example:

This HTML…

Displays as…

<div id="dropshadow" Style="width:420;
height: 80; font-size: 36pt;
font-family: arial; color: #FF0000;
filter: dropShadow (color=#000000, offX=20,
offY=20, positive=0)">Ann's drop shadow</div>

If you want to see a working example, you can look at the Filter Effects page. This HTML page shows the effects of all the visual filters. For each filter, there is an example. Underneath the example, there is a box for each parameter. You can change the values for the parameter and click on the Change button to see the effect. The Reset button restores the example to the initial state.