Home arrow Style Sheets arrow Creating Gradients for Individual Containers with PNG Images

Creating Gradients for Individual Containers with PNG Images

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
June 04, 2008
  1. · Creating Gradients for Individual Containers with PNG Images
  2. · Creating gradients for several web page headers
  3. · Styling individual containers of a web document
  4. · Styling individual containers for a given web page

print this article

Creating Gradients for Individual Containers with PNG Images
(Page 1 of 4 )

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!

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