Login

Save Password - Forgot Pass? 		Not a member?
Become a DC
member now!



         Filters and Transitions
  • Introduction
  • Static Filters
  • Transitions
  • Appendix A - The Matrix Transformation
      Rate this tutorial:
    This tutorial have been read 32692 times.

    Print-friendly version

    		•

    Filters and Transitions
    Written 07/14/2001 by Dan Pupius. Last updated 07/26/2001.


    Static Filters

    Internet Explorer 4+

    The static filters can be applied to any HTML control through the style tag:

    <div id="drop" style="filter: DropShadow(Color=red, OffX=2, OffY=2, Positive=1); width: 100; height:20;">hello</div>

    or at runtime through javascript:

    document.all["drop"].style.filter = "DropShadow(Color=red, OffX=2, OffY=2, Positive=1)";

    both produce this

    red drop shadow

    (note: for some reason you must specify the width and height attributes for the filter to work)

    Here is a list of the filters you can use:
    » alpha alpha blending (aka transparency)
    » blur motion blur
    » chroma makes a specified colour transparent
    » dropShadow creates a silhouette of the object
    » flipH flips the contents of the object horizontally
    » flipV flips the contents of the object vertically
    » glow creates a glow effect for the object
    » gray converts contents to grayscale
    » invert inverts the colours of the object
    » mask produces a mask of a specified colour
    » shadow like drop shadow except edges are blurred
    » wave adds a ripple to the image
    » x-ray seems to be like an OR function

    The best way to use these filter properties is to use WebFX's Filter Tool, you can also check the Microsoft Documentation, except this has been updated to work with the IE5.5+ method of applying filters.

    Internet Explorer 5.5+

    With IE5 Microsoft have changed the way filters are applied, they still use the filter property of the style tag, but uses different syntax. In HTML:

    style="filter:progid:DXImageTransform.Microsoft.DropShadow(Color=red, OffX=2, OffY=2, Positive=1)";

    and from code:

    document.all["drop"].style.filter = "progid:DXImageTransform.Microsoft.DropShadow(Color=red, OffX=2, OffY=2, Positive=1)";

    If you look at the Microsoft Documentation you will notice several other filters such as Light, Compositor and Matrix. These work a little differently than the others and probably best if you look at the specific documentation when you are interested.

    « IntroductionTransitions »

    Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved.