Drop Shadow Filter

The drop shadow filter (opposed to Shadow Filter - found here)
Using filters
The filter must be applied to an element that has width or height measurements. For example an image, table, table cell. You cannot, for example apply it to the <p>, H1, <b>.

Because an exact measurement is required one can use the <div> or <span> and define the width or height, or both. For example to apply the drop shadow filter to a line of text you could do this:

<center><div style="width: 400; height: 25; filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='2', OffY='2', Color='#c0c0c0', Positive='true')"><font face="Arial black" size="3" color="blue">This is blue text with gray drop shadow</font></div></center>

and the result would be this:

This is blue text with gray drop shadow

The code is broken down as follows:

<center>
This aligns the <div> center on the page or table cell.

<div style="width: 400; height: 25;
This sets the width and height of the area, a bit like the <td> table cell. If you are not sure what measurements to give the <div>, then create a table, put into it exactly what you want the shadow to be applied to, and see what the table measurements are - use those measurements for your <div>.

filter: progid:DXImageTransform.Microsoft.dropShadow
This identifies the name of the filter

(OffX='2', OffY='2',
This sets the position of the shadow along the vertical and horizontal. Play around with the numbers to see the results. In the below example, they have been set to -2, this puts the shadow top left.

This is blue text with gray drop shadow

Color='#c0c0c0'
This gives the color of the shadow, #c0c0c0 being gray.

Positive='true'
Now this one is interesting. You can have 'true' or 'false' in here. 'true' gives the text the shadow, 'false' as, below, gives the color of the shadow to the whole <div> leaving the actual text shadow area the color of the background - as in this example:

This is blue text with gray drop shadow

Don't forget to close your tags off - </div>

Applying filter to an image
You do not need the <div></div> tags, as width and height can be applied to an image. So here is example code that would be used.

Applying filter to a Table Cell
Now everything within the cell will have the drop shadow

<td height="70" width="400" style="filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='-2', OffY='-2', Color='#c0c0c0', Positive='true')">
</td>

The Shadow Filter as in item 5
This adds more of a blurry, natural look shadow than the Drop Shadow.

<div style="width:320; height:50; font-size: 32pt; filter: progid:DXImageTransform.Microsoft.Shadow (Color=#000000, Direction=135)"><font color="#456789" face="Arial">5. This is now the shadow filter</font></div></center>

Alter the following (Color=#000000, Direction=135) to change color of the shadow and the direction. The below example has a shadow color of #C0C0C0 (gray) and a direction of 100.

This is now the shadow filter

Remember - these filters only view in IE4 and higher. If you are using a WYSIWYG editor such as Front Page, then you will only see the effect in Preview. What you see in Normal view, is what other browsers will see.

Discount Templates	Discount Domains	Domain Reseller	Template-Layouts
Sponsor a child Living Kidney Donation

Best Front Page and Web Design Forum		Great Web Graphic program here
	The Drop Shadow & Shadow filter Adds shadow to an object