JavaScript Kit > IE Filters reference > Here
DropShadow Filter
The DropShadow filter adds a solid silhouette (aka shadow) to a content,
offset in the specified direction. Defined via IE's CSS filter
property, here is its basic
syntax:
Syntax:
filter: progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Syntax (post IE8):
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(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: 300px;
height: 300px;
background-color: black;
color: white;
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5,
positive=true)";
filter: progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5,
positive=true);
}
</style>
<div id="somediv">Some
DIV</div>
Syntax via scripting:
//To define a new DropShadow filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.dropShadow(color=#00ff00,offX=5,offY=5)"
//To get/set a property within the DropShadow filter:
object.filters.item("DXImageTransform.Microsoft.dropShadow").Color=#FF0000;
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 DropShadow filter:
DropShadow Filter attributes (properties)
Attributes/ Properties | Description |
---|---|
enabled | Sets/ returns whether the filter is enabled or not.
Default is true .Valid values: true/ false |
color | Read/Write hexadecimal value that determines the color of the shadow to be dropped.
Valid values: All valid hexadecimal colors or color names. Example: <style type="text/css"> Demo: |
offX, offY |
The amount of horizontal and vertical offset of the shadow
silhouette relative to the original content. Default is 5 for both
attributes. Valid values: Any integer (pixels implied) |
positive | Sets whether to create the drop shadow from the non
transparent pixels of the object. Default is true (non transparent).
Read/Write. Valid values: true/ false (Boolean) |