Back to Scripts

Javascript, Shadow and DropShadow

Requires Internet Explorer 5.5 or later to work
The DIV is located below, before applying image filters the image object requires its layout to be set.
We do that by setting its height and width properties (done inside the style tag).
Having the layout defined can also be done by setting the position attribute to absolute.
Or the layout can be defined by setting the property CONTENTEDITABLE in the div.

There are TWO specific filters to create shadows (shadow and dropshadow)
One filter makes a solid mask in the given color (dropshadow), the other creates a 3D type effect (shadow).

Shadow takes 3 parameters
color which can either be gray, red, green or defined numerically as #AAAAAA, #FF0000, #00FF00
direction in degrees, 0 - 359. 0 (top or 12 o'clock), 90 (right angle or 3 o'clock) 180 (down or 6 o'clock)
strength is the length of the shadow, getting lighter the longer it gets

DropShadow takes 4 parameters
color which can be defined by name (gray) or by value (#AAAAAA)
OffX Offset X, in pixels
OffY Offset Y, in pixels
Positive takes value true or false. If true the drop shadow is the image and text mask. If false then the shadow is the negative space instead (see example below)
Note: the drop shadow does NOT take into account transparency in images and renders them as blocks

Div text

DHTML Source


<!-- This DIV is the target container for the image.  -->  
    <table><tr><td width=100 height=100>
      <div id="mydiv" style="width:80; height:80;">
          <center>
          <img src='../images/BABY_doll.gif' STYLE="width=40; height=28;"><br>
          <font size=1>Div text</font>
          </center>
      </div>
    </td></tr></table>

    <br>
    <br>

<table>
<tr>
<td>
<!-- Buttons to manipulate the div.  -->
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=135, strength=16)'">shadow</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.DropShadow(color=gray, OffX=16, Offy=16, Positive=true)'">dropshadow, positive=true</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.DropShadow(color=gray, OffX=16, Offy=16, Positive=false)'">dropshadow, positive=false</button><br>
<button onclick="mydiv.style.filter=''">Clear Filter</button><br>
</td>
</tr></table>

References:
MSDN - Drop Shadow
MSDN - Shadow

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License