filter (CSS property)

Description

Since version 4, Internet Explorer for Windows has implemented a range of visual effects and transitions through the use of the proprietary filter property. Many weird and wonderful filters are available (there are too many to mention here!) but it’s worth documenting some of them. The syntax used in the examples of filter provided here, however, will only function in Internet Explorer 5.5 or later.

As we saw in Vendor-specific Properties, the Alpha filter is a popular filter that can be used to control the opacity levels of elements in Internet Explorer. The AlphaImageLoader is another popular filter which can be used to provide support for PNG (Portable Network Graphic) transparency in IE5.5 and IE6 (IE7 already offers native support for PNG transparency). IE6 and earlier versions don’t natively support alpha transparency (partial levels of transparency)—they support only binary transparency, where pixels are either fully opaque or fully transparent.

The AlphaImageLoader filter will display an image within an element between that element’s background and its content. The filter doesn’t have the same features as CSS background images, so its use is limited: you will be able to stretch or shrink the image, crop the image, or leave the image at its initial size, but you won’t be able to specify the equivalent of background-repeat or background-position for it.

When you use this filter, you set the URI of the image to be used via the src attribute. You then have three options for displaying that image using the sizingMethod attribute:

crop

This setting clips the image to fit the dimensions of the containing object.

image

This is the default value, and enlarges or reduces the border of the object to fit the dimensions of the image; the image remains at its original size.

scale

This setting will stretch or shrink the image according to the element’s size.

In the following example, a background image on an element with the ID "outer" is stretched to the size of the container in which it resides:

#outer {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='images/transparent-border.png',
      sizingMethod='scale');
}

As you can see, the filter syntax is a bit of a mouthful, but the only parts that need concern us are the src and sizingMethod values, as explained above.

For the filter to work, the element in question must have a layout, which can be achieved most simply by setting a dimension. See The Internet Explorer hasLayout Property for more information on IE and layout, and other properties that cause an element to gain a layout. It’s also important to note that IE shouldn’t have a background image specified, as that would conflict with the filter and ruin the effect. Therefore, when you’re using the filter, you’ll need to use some other sort of filter, such as conditional comments, or a hack like the one below.

Here’s an example that uses the star selector hack to supply the required declarations to IE6 and under (IE7 will ignore the rule):

#outer{
  width: 796px;
  margin: auto;
  background: url(images/transparent-border.png) repeat-y left top;
}
* html #outer {
  background: none; /*Remove background*/
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='images/transparent-border.png',
      sizingMethod='scale');
}

In the above CSS, we add a rule targeted to IE6 and earlier versions, using the selector * html #outer, in which we set the background-image property to none and specify the AlphaImageLoader filter. The result of the above CSS is that browsers that support PNG transparency will repeat the background image along the y axis, whereas the AlphaImageLoader filter will just stretch the image to the whole size of the element. This will cause the image to appear differently from what was expected, as you can see in Figure 1.

Figure 1. Firefox 2 and Internet Explorer 6

The intended effect is accurately displayed in Firefox 2 (on the left): a transparent border down the left-hand side. The transparent border has been stretched in IE6 (on the right) to cover the entire area. If we want to create this effect in IE6 and under, our only other choice is to use a very long image (to cover expansion of the element) and set the sizingMethod to "crop", but this approach may not always be feasible.

For an image that doesn’t need to stretch or scale with the layout, where sizingMethod can be set to "image" the effect will be much better, as can be seen Figure 2.

Figure 2. Transparency with no scaling

Firefox 2 is pictured on the left, while IE6 is on the right. There’s very little difference between the two since the image size remains unchanged.

Another issue arises from the filter’s use: anchors can’t be clicked when the anchor lies on a background that’s been created by the filter. Usually, what happens is that the filter is applied to an element that has position set to relative, and the links suddenly stop working. Sometimes, we can fix the issue by setting position to relative for the anchors in question, and setting a z-index appropriately. This isn’t a foolproof method, though, and the solution is often to remove the filter from the original element, and instead to place it on a nested element that doesn’t have position set to relative.

It has also been noted that the size of the image used can have an impact on whether or not the anchors are clickable, but in most cases the solutions already mentioned above are enough to resolve the issue.

filter:Alpha(Opacity=40);/* IE7 and under */
-ms-filter: "Alpha(Opacity=40)"; /* IE8 */

The Shadow and DropShadow filters can be used to create shadow effects for HTML elements. The following example uses the DropShadow filter to create a shadow around an h1 element that has a class of "shadow":

<h1 class="shadow">Shadow Heading</h1>

Here’s the rule with which we specify the filter:

h1.shadow {
  width: 260px;
  color: gray;
  filter: progid:DXImageTransform.Microsoft.DropShadow(
      offx=2, offy=1, color=#000000);
}

The DropShadow filter accepts offx and offy attribute values, which represent the offset distance in pixels along the x and y axes respectively, and a color attribute value for the shadow color.

The result of that CSS can be seen in Figure 3.

Figure 3. Applying the DropShadow filter

If we keep the HTML the same as the previous example, we can specify the Shadow filter like this:

h1.shadow {
  width: 260px;
  color: gray;
  filter: progid:DXImageTransform.Microsoft.Shadow(
      color=#000000,direction=45);
}

The Shadow filter also accepts a color attribute value, but instead of offsets, a direction is specified. The direction value is an integer between "0" and "360", representing degrees; the default value is "225".

The result of this CSS can be seen in Figure 4.

Figure 4. Applying the Shadow filter

Value

The value of the filter property begins with the filter name followed by any applicable attributes and values. Each filter has a different set of attributes available, so you’ll need to check the Microsoft Developer Network site for their details.

Compatibility

This property is a proprietary Microsoft CSS extension.