Best Front Page and Web Design

Great Web Graphic program

The Drop Shadow & Shadow filter
Adds shadow to an object



back  -  home  -  Filters scripts



2. You can change position of the shadow
3. And you can change the colour of the shadow


logoman logoman with filter applied

4. Or you can apply it to an image


5. This is now the shadow filter



Instructions for use of 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:

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

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

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.

<img src="rover.gif" alt="my dog" width="104" height="129" style="filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='-2', OffY='-2', Color='#c0c0c0', Positive='true')">

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

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.

back  -  home  -  Filters scripts

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