Creating Gradients for Web Page Headers with PNG Images
(Page 1 of 4 )
Welcome to the third part of the series, “Using PNG images to build background effects.” This series teaches you how to create eye-catching web page gradients that not only make use of transparent PNG graphics to achieve this visual effect, but will be displayed correctly by a number of modern browsers, including Internet Explorer 6.
As you probably know, many web designers refuse to utilize transparent PNG images to decorate their web sites, because Internet Explorer 6 and below have serious difficulties when displaying these types of graphics. This is because they use alpha-based transparency, instead of binary-based, which is utilized with GIF images.
However, if you’re an enthusiastic web designer who’s looking for an approachable guide on how to build fancy web page gradients by way of a few tiny PNG graphics without sacrificing browser compatibility, then look no further, because you’ve come to the right place.
Having already described the main subject of this article series, it’s time to refresh the topics that were discussed in the last tutorial, in case you haven't read it yet. Essentially, I demonstrated how to build a fancy web page gradient by using a combination of partially-transparent PNG images along with a solid background color. This achieved a visual effect that’s very popular with many Web 2.0 sites. However, the most important detail to stress concerning the creation of the gradient was that it was displayed correctly by most browsers, including Internet Explorer 6, even when the PNG graphic used by this gradient contained certain transparent sections.
You're probably wondering how this was achieved. Well, the solution was a little tricky, and involved the utilization of an Internet Explorer proprietary filter called “AlphaImageLoader.” This definitely came in handy for displaying PNG graphics that include a number of transparent areas.
With this filter at your disposal, it’s relatively easy to implement a CSS hack that usually handles PNG images via a conventional approach, but uses this filter instead, when working with IE 6 and below. Quite easy to grasp, don’t you think so?
So far, so good. Now that you hopefully recall all the details of the technique that I explained in the previous tutorial of the series, I think that it’s time to talk about the topics that I plan to discuss in the next few lines.
Since the approach that I implemented for building PNG-based web page gradients can be easily applied to other elements of a web document, up next, I will explain how to include these gradients in certain headers of a document. This will demonstrate how versatile and flexible this approach can actually be when it comes to rendering transparent PNG graphics on multiple browsers.
So, are you ready to tackle the third chapter of this instructive journey? Let’s get started!
Next: Reintroducing the AlphaImageLoader Microsoft’s proprietary filter >>
More Style Sheets Articles
More By Alejandro Gervasio
