Gradient Filter

Best Front Page and Web Design Forum		Great Web Graphic program here
	The Gradient Filter Displays a colored surface between the object's background and content

back - home - Filters scripts

1. A simple gradient

2. With Glow Filter Added

Instructions for use of filter

The Gradient Filter

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 directly to the <p>, H1, <b>.

Because an exact measurement is required one can use the <div> or <span> define the width or height, or both, then the content will have the filter applied to it. Below are the codes used for this page, and at the end of them an explanation of how to use them.

Example 1 above, the filter was applied to the table cell <td>. This is the code used:

<td style="FILTER: progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#c0ff3300, endColorstr=#ff000000); COLOR: green; HEIGHT: 120px"><p align="center"><font size="5">1. A simple gradient</font></td>.

Example 2 has the gradient filter applied to the table cell. Into the table cell is a <div> and the glow filter has been applied to the content of the <div>. Here is the code used:

<td style="FILTER: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffff3300, endColorstr=#ff000000);" width="382" bgcolor="#000000" align="center" height="200"><div style="FILTER: progid:DXImageTransform.Microsoft.glow(strength=2,
color=yellow); width:382;"><b><font color="#000000" face="Arial Black" size="5">2. With Glow Filter Added</font></b></div></font></td>

The web page itself has the gradient filter applied. To do this, the whole page is set within a <div>, with measurements of 100%. Here is the code to do that:

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

</div>
</body>

How to use them

You can apply the Gradient Filter to most things that have a measurement - image, table cell, div etc etc. You then apply the filter using Styles. Here is Example 1 explained.

<td style="Filter: progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#c0ff3300, endColorstr=#ff000000); COLOR: green; HEIGHT: 120px">Your table cell content goes here .... whatever you like</td>

style=" "		Everything within the " " is applied to the table cell's content
Filter:		This is now saying that a Filter is to be applied and the name and attributes of the filter is to follow
progid:DXImageTransform.Microsoft.gradient		This is the name of the filter.
(GradientType=1,		There are two types of Gradient - 0 and 1. 0 gives a gradient running from top to bottom and 1 from left to right.
startColorstr=#c0ff3300,		This is the start color of the gradient. Note the HEX color number has 8 instead of 6 numbers. The first two numbers or letters are the Alpha values (The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque). The second two 'ff' represent degrees of Red, the third pair '33' degrees of blue and the last pair '00' degrees of green. The default, if no value is given for the startColorstr is blue - #FF0000FF.
endColorstr=#ff000000);		This is the same as the startColorstr only it is the color of the finished gradient. The default color, if no value is given is black - #FF000000
NOTE:		It does not matter in which order the three attributes are placed, but they must start with the opening ( and end with the closing ) followed by ; which indicates that the filter description has finished. Each one must be separated by a , - if you just want the default colors of blue and black, then you only need type in the GradientType - 0 or 1.
IE specific Marquee can have a gradient ...... all sorts of things can		Even a text area can have a gradient

Have fun with filters - but just remember, not all browsers will see them, so make
sure that the page is still 'viewable' without the filters applied.

back - home - Filters scripts

top

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