Export (0) Print
Expand All

-ms-filter property

Sets or retrieves the filter or collection of filters that are applied to the object.

Note   As of Windows Internet Explorer 9 this feature was deprecated. As of Internet Explorer 10 this feature was removed and should no longer be used.

Internet Explorer 10

 

Syntax

-ms-filter: filtertype1 (parameter1, parameter2,...) | filtertype2 (parameter1, parameter2,...)

Property values

filtertype1 (parameter1, parameter2,...)

Any filter listed in the Visual Filters and Transitions Reference.

filtertype2 (parameter1, parameter2,...)

Any filter listed in the Visual Filters and Transitions Reference.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial ValueN/A

Remarks

The following table lists the most popular DX Filters and their standards-based alternatives:

DX FilterStandards-based Alternative
Alphaopacity
AlphaImageLoader<img> or background-image and related properties
Gradientbackground-image: linear-gradient()
DropShadowtext-shadow or box-shadow
Matrixtransform, transform-origin

 

Windows Internet Explorer 8. The -ms-filter attribute is an extension to CSS, and can be used as a synonym for filter in IE8 Standards mode. When you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). Use commas (,) to separate multiple values, as shown in the Examples section.

An object must have layout for the filter to render. A simple way to accomplish this is to give the element a specified height and width, or both. However, there are several other properties that can give an element layout. For more information about these other properties, see the hasLayout property.

The shadow filter can be applied to the img object by setting the filter on the image's parent container.

The filter mechanism is extensible and enables you to develop and add filters later. For more information about filters, see Introduction to Filters and Transitions.

Not available on the Macintosh platform.

Examples

The following example shows how to use the -ms-filter attribute in Internet Explorer 8.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm


-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';


The following example shows how to use an inline style sheet to set the filter on an image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm


<img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
    progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
    src="/workshop/samples/author/dhtml/graphics/cone.jpg"
    height="80px" width="80px" alt="cone">

The following example shows how to use inline scripting to set the filter on an image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm


<script type="text/javascript">
function doFilter ()
{ 
    filterFrom.filters.item(0).Apply();
    // 12 is the dissolve filter.  
    filterFrom.filters.item(0).Transition=12;
    imageFrom.style.visibility = "hidden";
    filterTo.style.visibility = ""; 
    filterFrom.filters.item(0).play(14); 
}
</script>
</head>
<body>
<p>Click the image to start the filter.</p>
// Call the function.
<div id="filterFrom" onclick="doFilter()" 
    style="position: absolute; 
        width: 200px; 
        height: 250px; 
        background-color: white; 
        filter: revealTrans()">
<img id="imageFrom" 
    style="position: absolute; 
        top: 20px; 
        left: 20px;" 
    src="sphere.jpg" 
    alt="sphere">
<div id="filterTo" 
    style="position: absolute; 
        width: 200px; 
        height: 250px; 
        top: 20px; 
        left: 20px; 
        background: white; 
        visibility: hidden;">
</div>
</div>
</body> 

See also

CSSStyleDeclaration
currentStyle
style

 

 

Show:
© 2014 Microsoft