September 17, 2000 - Defining a Filter

Yehuda Shiran September 17, 2000
Defining a Filter
Tips: September 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

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.

Learn more about filters in Column 68, Introduction to Filters in IE 5.5 and Up.