Inside Dynamic HTML: Dynamic HTML Filters

Creating Filters

Filters are specified using the CSS Filter Property. The CSS Filter property allows one or many filters to be specified at once. For example, to add a chroma filter to an image:

     <IMG SRC="myImage.gif" STYLE="filter: chromakey()">

Multiple filters can be applied to an element by providing a space separated list. When using multiple filters they are applied in the order specified. For example, to flip and invert the contents of a table cell:

     <TABLE><TR>
       <TD STYLE="filter: flipH() Invert()">
         We are flipped and inverted
       </TD>
     </TR></TABLE>

Some filters also support extra properties and are specified within the parenthesis of each individual filters. This is using a function notation. To apply a red drop shadow to a DIV, you can set the dropShadow filter's color property.

      <DIV STYLE="width: 100%; filter: dropShadow(color=red)">
        Add a red drop-shadow
      </DIV>

In the above example, we added a width to the DIV. Without the width, the filter would not have been applied. We explain this in the next section Applying Filters.

DHTML Toolkits

4Introduction

4Creating Filters

4Applying Filters

4Filter Toolkit

4Lighting Toolkit

Creating Filters