JavaScript Kit > IE Filters reference > Here
Shadow Filter
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
The default value is 270 (or Left). Example: <style type="text/css"> 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 |