filter (CSS property)

Spec
Inherited Initial Version
No CSSN/A
Browser support (more…)
IE5.5+ FF3.5 SA4 OP10 CH2
Full None None None None

Syntax

filter:filter;

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.

Note: Filters and Layout

For filters to work, the element in question must have a layout—a requirement that can be achieved most simply by setting a dimension such as width. See The Internet Explorer hasLayout Property for more information on IE and layout, and other properties that cause an element to gain a layout.

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.

Important: Relative Image Paths

Unlike normal background images in CSS, the path to the image file is relative to the HTML page location, not the CSS file. For that reason, it’s safer to use an absolute address for the image, so that no conflicts arise.

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 An illustration of the difference between Firefox 2 and
          Internet Explorer 6 when displaying transparent backgrounds. The
          Firefox display shows a box with a shadow along the left-hand side.
          The Internet Explorer display shows how the shadow is stretched to
          fill the entire area around the box destroying the shadow
          effect.

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 A comparison of transparent backgrounds displayed using Firefox
          and Internet Explorer. When the sizingMethod property is set to
          "image" in Internet Explorer the shadow effect is preserved and
          looks identical to the Firefox display.

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.

Note: Filters and IE8

As filters are proprietary extensions it is suggested (IEBlogs) that if you are using them in IE8 then you should use the syntactically correct pre-fix of -ms-filter and ensure that the value is contained within quotes. Of course you will still need the old version for IE7 and under.

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

It would also be wise to place the proprietary code inside conditional comments so that only the browser versions that need them actually see the code.

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 A text heading with a simple shadow.

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 A text heading with a long shadow.

Example

This example applies a filter called MotionBlur to the element with the ID "example":

#example {
  filter: progid:DXImageTransform
  ➥    .Microsoft.MotionBlur(
  ➥    strength=10,
  ➥    direction=310);
}

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full None None None None None None None None None None None None None

This property is a proprietary Microsoft CSS extension.

User-contributed notes

Related Products