Creating Gradients for Web Page Headers with PNG Images

If you found it extremely easy to decorate the background of a web page using a PNG-based gradient, then you’ll probably grasp how to apply the same visual effect to some of its section headers. Basically, the procedure is quite straightforward, and it requires defining a generic “sectionheader” CSS class that can be quickly linked to all of the headers of a sample web page.

So, having explained how this approach is going to function, pay attention to the definition of the aforementioned “sectionheader” CSS class. It’s as follows:

.sectionheader{

background: #fff url(bg.png) left top repeat-x;

}

/* use the * html CSS hack to render an alpha-based transparent background */

* html . .sectionheader {

background: #fff;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',
sizingMethod='scale');

}

As you can see, the above “.sectionheader” CSS class has been defined in such a way that it will be applied normally to selected elements of a web page when working with non-IE browsers. However, in Internet Explorer, the corresponding “AlphaImageLoader” filter will be used instead.

This CSS hack will make all of the gradients that use a transparent PNG image display correctly on most browsers. As you’ll certainly recall, this simple hack was used when building complete web page gradients. Its flexibility allows it to be applied, for instance, to all the <h2> headers of a sample web page.

The demonstration of how to decorate all of the <h2> headers with PNG-based gradients will be explained in detail in the last section of this tutorial. Therefore, click on the link shown below and keep reading, please.