Categories:

JavaScript Kit > IE Filters reference > Here

Shadow Filter

Last updated: October 28th, 2008

The Shadow Filter creates a solid silhouette of the object, offset in the specified direction- aka- a shadow. Defined via IE's CSS filter property, here is its basic syntax:

Syntax:

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

Syntax (post IE8):

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(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.Shadow(Color=gray, direction=45)";
filter: progid:DXImageTransform.Microsoft.Shadow(Color=gray, direction=45);
}

</style>


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

Syntax via scripting:

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

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

//To access an existing property within the Shadow 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 Wave filter:

Wave Filter attributes (properties)

Attributes/ Properties Description
Color Sets/ returns the color of the shadow using a color name or hex value.

Valid values: #RRGGBB or supported color name (ie: gray).

direction Sets/ returns the direction of the shadow. It is expressed in either degrees (ie: 90), or one of the supported keywords.

Valid values: tr

In Degrees

 Keyword

0 Top
45 Top right
90 Right
135 Bottom right
180 Bottom
225 Bottom left
270 Left
315 Top left

The default value is 270 (or Left).

Example:

<style type="text/css">

#castle{
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=gray, direction=Bottom right)";
filter: progid:DXImageTransform.Microsoft.Shadow(Color=gray, direction=Bottom right);
}

</style>

<img id="castle" src="castle.jpg" />

Demo (requires IE5.5+):

enabled Sets/ returns whether the filter is enabled or not. Default is true.

Valid values: true/ false

strength Sets/ returns the distance the shadow extends, in px. Default value is 5.

Valid values: 1 to 255

Reference List

[an error occurred while processing this directive]

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