Introduction to Filters in IE 5.5 and Up: Multiple Filter Definition
Introduction to Filters in IE 5.5 and Up
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>
Notice the space between the two filter specifications (but no spaces between
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>
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:
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:
Next: How to script filters