Dynamic HTML in Action

Filters change the appearance of an element. For example, filters can flip an image or a block of text horizontally on its axis. They can also give an image or text a directional fade or a shadow. Transitions are typically used to transform an element from one condition to another. These are similar to effects frequently seen on television; for example, one image or page changes into another through a dissolve effect or by wiping from left to right.

Both visual filters and transitions are applied with the filter CSS attribute. Implementing filters and transitions through styles offers several advantages over using script and special ActiveX controls or Java applets. Using styles makes programming easier and provides automatic backward compatibility to browsers that do not understand either the filter attribute or CSS as a whole. This compatibility is achieved because any CSS attributes that are not understood by a browser are ignored; therefore, even if a browser does not render the filter on an element, it will still display the element and should not crash or return errors. This technique is also used for DHTML Behaviors, which are discussed in Part 5.

Useful tools for generating filters and transitions include the following, which can be found on the companion CD in the folders as indicated.

These tools should also be available from the online version of the SBN Workshop at microsoft.com/workshop.