Categories:

JavaScript Kit > IE Filters reference > Here

Blur filter

Last updated: October 27th, 2008

The Blur filter adds a blur to the given content to make it appear out of focus. Defined via IE's CSS filter property, here is its basic syntax:

Syntax:

filter: progid:DXImageTransform.Microsoft.Blur(attribute1=value1, attribute2=value2, etc);

Syntax (post IE8):

-ms-filter: "progid:DXImageTransform.Microsoft.Blur(attribute1=value1, attribute2=value2, etc)";

Note: See "Difference in syntax between pre IE8 and IE8+ browsers" for more info on the changes to the filter syntax in IE8+.

Example:

<style type="text/css">

#somediv{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)";
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
}

</style>


<div id="somediv">Some DIV</div>

Syntax via scripting:

//To define a new Blur filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.Blur(attribute=value1, attribute2=value2)"

To access an existing property within the Blur filter:
object.filters.item("DXImageTransform.Microsoft.Blur").Property1=value1;

//To access an existing property within the Blur filter via the filters[] object
object.filters[x].Property1=value1 //where "x" is the position of the filter within list of filters on element

When getting or setting a specific filter's attribute via scripting, you capitalize the attribute to turn it into a property.

Below lists the attributes/properties of the Blur filter:

Blur Filter attributes (properties)

Attributes/ Properties Description
enabled Set whether the filter is enabled or not. Default is true.

Valid values: true/ false

pixelRadius Read/Write value, which determines the size of the pixel that is formed to blur the element. Default is 2.

Valid values: 1 to 100

Example:

<style type="text/css">

#test{
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)";
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
}

</style>

<img id="test" src="banana.gif" onMouseover="this.filters.item(0).enabled=false" onMouseout="this.filters.item(0).enabled=true" />

Demo (requires IE5.5+):

makeShadow, ShadowOpacity Optional attributes that decides whether to display the content as a shadow. Typically you would use this attribute on a copy of a content that is absolutely positioned beneath the original to create a blurred shadow of it.
  1. Valid values for "makeShadow": true/ false
  2. Valid values of "ShadowOpacity": 32-bit ARGB format color values (ie: 0x00000000, 0X0000ff, or 0xFFFFFFFF)

Example (adds a blurred shadow to a piece of content):

<style type="text/css">

#modified{
-ms-filter: "progid:DXImageTransform.Microsoft.blur(pixelradius=5.0, makeShadow=true, ShadowOpacity=0.5)";
filter: progid:DXImageTransform.Microsoft.blur(pixelradius=5.0, makeShadow=true, ShadowOpacity=0.5);
position:absolute;
z-index:-1;
}

</style>


<div id="modified">
<img src='cat.jpg' /><br />This is my cat.
</div>

<div id="original">
<img src='cat.jpg' /><br />This is my cat
</div>

Demo (requires IE5.5+):


This is my cat.

This is my cat


Reference List

[an error occurred while processing this directive]

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.