Add Gradient Using HTML (Only Works in IE)
A few days back, a friend asked me how he could add gradient to his site using only html and no other images or external references. We googled it and found one very intrestign way. The only problem is that it uses ActiveX Scripts and so works in IE. I tested it in Firefox and it did not work.
Before you start out remeber always select one light and one dark color for the gradient to display properly.
This powerful HTML code effect can be used to give your web pages a unique look and feel. However, it must be used very cautiously. Please ensure that you select your HTML web page background colors very carefully, as your text must be clearly visible through the background colors you select. In addition, you must select one light color and another color that is several shades lighter in order for this HTML gradient background effect to display properly.
This effect can be used for your entire web page background, or within your table cells.
To use the gradient effect as your web page background, use the following BODY tag:
<body style=”filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=’#C0CFE2′, startColorstr=’#FFFFFF’, gradientType=’0′);”>
To use the gradient effect within your HTML tables, place the following code within your table tag:
style=”filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=’#C0CFE2′, startColorstr=’#FFFFFF’, gradientType=’0′);”
Here is some explanation :
endColor and startColor
They have obvious meanings. Just keep in mind that out of these one should be light and one should be relatively darker.
Gradient Type
0 – Vertical Gradient
1 – Horizontal Gradient
2 – Makes the colors dark. (Nothing else happens)
Have fun !!
Edit: In my next post i will talk about another way to add gradient using sliced images that don’t take up much time to load. So keep watching this space :)
