Multiple Filter Definition

Let's apply now the Engrave filter in addition to the DropShadow filter from the previous page. Here is the definition and the effect:

<DIV STYLE="width: 40%; filter:
progid:DXImageTransform.Microsoft.DropShadow(color='red',
OffX=3, OffY=2) progid:DXImageTransform.Microsoft.engrave()">
<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.

Notice the space between the two filter specifications (but no spaces between progid: and DXImage). Also observe that the two filters operated on the image in series: the Engrave filter was applied after the DropShadow filter. The specification order determines the application order. Here is our previous example, first engraved, then drop-shadowed.

<DIV STYLE="width: 40%; filter:
progid:DXImageTransform.Microsoft.engrave()
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.

You can clearly see that the filter order does matter. The most important rule to remember is that the object that the filter applies to must have layout for the filter effect to be seen. An object is said to have layout when one of the following properties are defined for it:

• height
• width
• position: absolute
• contentEditable: true

Some objects, like form controls, have layout by default. Another rule to follow is that when you nest an object inside another object, make sure the outermost object is positioned as absolute. Filters are ignored for any positioned objects nested inside nonpositioned objects, such as positioned SPAN inside nonpositioned DIV.

Filters are ignored for the following objects:

• The OBJECT, EMBED, and APPLET elements.
• The SELECT and OPTION form elements.
• The TABLE, TR, THEAD, TBODY, and TFOOT table elements.

Next: How to script filters