Filter Definition

You add filters to an HTML element by adding the filter: specification to its STYLE attribute:

<ELEMENT STYLE="filter:
  progid:DXImageTransform.Microsoft.filtername(sProperties)">

Notice that progid: is part of the DirectX specification and there should not be any space between progid: and DXImage. Doing so will result in an error, and the effect of the filter will not be seen. You can attach multiple filters to the same element. Let's take an example element and see how it loads with one and two filters. Here is the original DIV block, definition and outcome:

<DIV STYLE="width: 40%; height: 100">
<IMAGE SRC="bicycle.gif"><FONT COLOR="blue">In this page we explain
the basics of using filters.</FONT></DIV>

In this page we explain the basics of using filters.

Let's apply the DropShadow filter. It creates a colored shadow to text and images. Here is the above example, after applying the DropShadow filter, definition and outcome:

<DIV STYLE="width: 40%; filter:
progid:DXImageTransform.Microsoft.DropShadow(color='red',
offX=3, offY=2)">
<IMAGE SRC="bicycle.gif"><FONT COLOR="blue">In this page we explain
the basics of using filters.</FONT>
</DIV>

In this page we explain the basics of using filters.

As you can see above, each filter can have a set of optional parameters that define the effect's details, such as color, duration, strength, etc.

Next: How to define multiple filters