DHTML Toolkits

If you are seeing this message, please click here for an alternative home page. This home page requires Internet Explorer 4.0 preview 2 or later. If you reached this page by a link from within Inside Dynamic HTML, please send mail to bug@insideDHTML.com as you should have been automatically redirected to the appropriate page. Thank you.

Dynamic HTML Visual Filters

By Scott Isaacs


Internet Explorer 4.0 supports CSS extensions for adding custom effects to your HTML page. These effects are called filters.

Filters can replace many of the current uses of images. For example, the title to this section is plain HTML (try selecting the text) and not an image. The shadow effect was added using a dropShadow filter. In browsers that do not support Filters, the filter is ignored and the header is displayed normally.

Internet Explorer 4.0 currently supports the following visual filters:
EffectDescription
AlphaSets a transparency level.
BlurCreates the impression of moving at high speed.
ChromaMakes a specific color transparent.
DropShadowCreates an offset solid silhouette.
FlipHCreates a horizontal mirror image.
FlipVCreates a vertical mirror image.
GlowAdds radiance around the outside edges of the object.
GrayscaleDrops color information from the image.
InvertReverses the hue, saturation, and brightness values.
LightProjects a light source onto an object.
MaskCreates a transparent mask from an object.
ShadowCreates a solid silhouette of the object.
WaveCreates a sine wave distortion along the x-axis.
XRayShows just the edges of the object.

Next we will discuss creating filters with the CSS Filter Property.