{-ms-filter} Trident Vendor-Prefixed Property | CSS: Presentation Layer

Standards Based Development

--ms-filter property is a Trident vendor-prefixed Microsoft Extension to css. --ms-filter is used for setting or retrieving the filter or collection of filters that are applied to an object.

--ms-filter property was introduced with ie8; --ms-filter is a css extension and can be used as a synonym for filter in ie8 standards mode. When using --ms-filter, enclose the progid in single quotes or double quotes and use commas to separate multiple values.

An object must have layout for the filter to render; layout can be accomplished by giving an element a specified width or height, or both. More information about other properties can give an element layout.

Shadow filter can be applied to the img / object by setting the filter on the img /'s parent container.

The filter mechanism is extensible and enables the development and addition of filters.

Property Values

filtertype1 (parameter1, parameter2,...): Any filter listed in Visual Filters and Transitions Reference.

Examples

Simple example: Live example - requires ie8 and up.


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

Inline style example: Live example - requires ie8 and up.


<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" >/

Inline scripting being used to set the filter on the img /: Live example - requires ie8 and up.


<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>

References and Resources

-ms-filter property