Categories:

JavaScript Kit > IE Filters reference > Here

DropShadow Filter

Last updated: October 27th, 2008

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

#test{
background-color: black;
color: white;
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#C0C0C0, offX=10, offY=8,  positive=true)";
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#C0C0C0, offX=10, offY=8,  positive=true);
}

</style>

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

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)


Reference List

[an error occurred while processing this directive]

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