Home arrow Style Sheets arrow Creating Gradients for Web Page Headers with PNG Images

Creating Gradients for Web Page Headers with PNG Images

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
May 28, 2008
  1. · Creating Gradients for Web Page Headers with PNG Images
  2. · Reintroducing the AlphaImageLoader Microsoft’s proprietary filter
  3. · Decorating headers of a web page
  4. · Linking the gradient CSS class to the structural markup

print this article

Creating Gradients for Web Page Headers with PNG Images
(Page 1 of 4 )

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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials