Creating Gradients for Individual Containers with PNG Images
(Page 1 of 4 )
Welcome to the final part of the series called “Using PNG images to build background effects.” This series teaches you how to combine the power of CSS with Microsoft’s proprietary graphic filter to build professional-looking gradients that can be applied to any element of a web page. These gradients will also be rendered correctly by most modern browsers.
Aside from being great for building bulleted (X)HTML lists, PNG images can be really useful for creating web page gradients based on their support for alpha-based transparency. However, one of the major drawbacks of utilizing transparent PNG graphics to decorate web sites is that they’re not natively supported by Internet Explorer 6 and below. This is an issue that significantly limits their use.
Fortunately, not all is lost when it comes to using transparent PNG images to build PNG-based web page gradients. It’s possible to implement a few simple CSS workarounds that will permit them to be displayed consistently across most modern browsers. Nonetheless, learning how to achieve this requires you to read through this article series, so don’t waste more time; get started now!
At this point, I assume that you’re well aware of the main objective of this group of articles, so let me provide you with a quick review of the topics that I covered in the preceding tutorial. Ready to go? All right. As you’ll recall, I showed you the details of how to implement a handy CSS hack to create some PNG-based gradients that were applied to different <h2> headers of a sample web page.
The hack in question makes use of a proprietary Internet Explorer filter, called “AlphaImageLoader,” along with a basic CSS class that, when included in the same definition of styles, allows you to display the pertinent gradients in a true cross-browser fashion. This fixes the intrinsic limitations of Microsoft’s browser when it comes to rendering transparent PNG images.
So far, so good, right? I’m pretty sure that you’re familiar with building eye-catching gradients using PNG graphics, so it’s time to focus on the items that I plan to discuss in this final part of the series. In the previous tutorial, you learned how to apply those gradients to certain headers of a basic web page. In the next few lines, I’m going to teach you how to include them in individual containers of a web document. This will extend their functionality for decorating purposes.
With the introduction out of our way, let’s learn how to create fancy web page gradients using a few transparent PNG graphics. Indeed, this is going to be an instructive experience!
Next: Creating gradients for several web page headers >>
More Style Sheets Articles
More By Alejandro Gervasio
