B.35. filter

Internet Explorer for Windows offers this property, which lets you apply static special effects, and animated transitions, to any HTML element.

Inherited: No

B.35.1. Value

Internet Explorer 4 or later for Windows supports a set of 14 static filters and two animated transition filters. Internet Explorer 5.5 or later supports a new filter technology that offers all the filters supported by IE4 and a bunch more besides, with a total of 2 procedural surface filters, 16 static effect filters, and 17 animated transition filters.

Static filters offer effects such as translucent elements, drop shadows, glows, blurs, flips, rotations, lighting, and distortions. Animated transition filters let you wrap an element's change from one appearance to another in an animated effect. Available transitions include simple PowerPoint-style wipes and slides, smooth fades and gradient wipes, and a fanciful pixelation effect.

You need to apply animated transition filters with CSS and then trigger them with JavaScript code to see the animated effect.

Internet Explorer 4 filters have the following syntax:

filter: filter(param=value, …)

Internet Explorer 5.5 filters look like this:

filter: progid:DXImageTransform.Microsoft.filter(param=value, …)

You can apply filters in any sensible combination by specifying them one at a time, separated by spaces, in the value of the filter property.

For complete documentation that covers all the available filters as well as how to use them in various ways, Microsoft's Introduction to Filters and Transitions and it's Visual Filters and Transitions Reference.

Initial value: none

B.35.2. Compatibility

CSS Version: n/a

Internet Explorer 4 or later supports a basic set of filters and transitions. These basic filters are superseded in Internet Explorer 5.5 by an entirely new set of filters, but support for the original set is maintained for backwards compatibility.

B.35.3. Examples

This style rule uses the IE4 static filter dropShadow to show a shadow beneath any element of class floating:

.floating {
  filter: dropShadow(color=#000000, offx=5, offy=5);
}

The style rule in this example assigns the IE5.5 animated transition filter Pixelate to the element with the ID toolbar. The JavaScript code then assigns an event handler that gets triggered when the page finishes loading. The event handler enables the filter (it's disabled in the CSS code), sets the starting state for the transition with Apply(), makes the element visible (it's hidden in the CSS code), then plays the transition with Play().

<style type="text/css">
#toolbar {
  visibility: hidden;
  filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50,
Duration=1, Enabled=false);
}
</style>
<script type="text/javascript" language="JavaScript">
window.onload = function() {
  var toolbar = document.getElementById('toolbar'),
  toolbar.filters[0].enabled = true;
  toolbar.filters[0].Apply();
  toolbar.style.visibility='visible';
  toolbar.filters[0].Play();
}
</script>