Home arrow Style Sheets arrow Page 2 - Creating Gradients for Web Page Headers with PNG Images
STYLE SHEETS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Creating Gradients for Web Page Headers with PNG Images - Reintroducing the AlphaImageLoader Microsoft’s proprietary filter
(Page 2 of 4 )

Before I show you how to build fancy gradients that can be used with certain headers of a given web page, first, I’d like to reintroduce the hands-on example that I developed in the previous article of the series. It was tasked with creating a PNG-based gradient that was tiled horizontally across the whole web document.

The source code corresponding to this practical example looked like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Sample web page with PNG-based background (cross-browser version)</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body{

padding: 0;

margin: 0;

}

h1{

padding: 5px;

margin: 0;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

h2{

padding: 7px 5px 8px 5px;

margin: 0;

background: #fc0;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

#header{

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #fc0;

}

#navbar{

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #ffc;

}

#navbar ul{

list-style: none;

}

#navbar li{

display: inline;

padding-right: 4%;

}

#navbar a:link,#navbar a:visited{

font: normal 12px Arial, Helvetica, sans-serif;

color: #039;

text-decoration: none;

}

#navbar a:hover{

text-decoration: underline;

}

#mainwrapper{

clear: both;

width: 800px;

height: 100%;

margin-left: auto;

margin-right: auto;

overflow: hidden;

background: #fff;

}

#mainwrapper .leftcol{

position: relative;

float: left;

}

#mainwrapper .rightcol{

position: relative;

float: right;

}

#leftbar{

width: 180px;

padding: 10px;

}

#centerbar{

float: left;

width: 380px;

padding: 10px;

background: #fff;

}

#rightbar{

width: 180px;

padding: 10px;

}

#footer{

clear: both;

width: 780px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #fc0;

}

.contbox{

padding: 10px;

margin-bottom: 10px;

background: #eee;

border: 1px solid #ccc;

}

.gradient{

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

}

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

* html .gradient{

background: #fff;

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

}

</style>

</head>

<body class="gradient">

<div id="header">

<h1>This is the header section of the web page</h1>

<p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p>

</div>

<div id="navbar">

<h1>This is the navigation bar of the web page</h1>

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

<li><a href="#">Link 3</a></li>

<li><a href="#">Link 4</a></li>

<li><a href="#">Link 5</a></li>

<li><a href="#">Link 6</a></li>

</ul>

</div>

<div id="mainwrapper">

<div id="leftbar" class="leftcol">

<h2>Section title</h2>

<div class="contbox">

<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>

</div>

<h2>Section title</h2>

<div class="contbox">

<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>

</div>

</div>

<div id="centerbar" class="leftcol">

<h2>Section title</h2>

<div class="contbox">

<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>

<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>

<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>

</div>

</div>

<div id="rightbar" class="rightcol">

<h2>Section title</h2>

<div class="contbox">

<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>

</div>

<h2>Section title</h2>

<div class="contbox">

<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>

</div>

</div>

</div>

<div id="footer">

<h1>This is the footer section of the web page</h1>

<p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p>

</div>

</body>

</html>  


As you can see, the above code sample creates a three-column web page that is basically decorated with a gray-colored gradient that fades progressively to transparent by way of a tiny PNG background image, tiled horizontally. Of course, the most important aspect to note with reference to the previous example is the utilization of “AlphaImageLoader,” Microsoft’s proprietary filter within the  “gradient” CSS class, to correctly display the PNG graphic when working with IE 6 and below.

If you take a moment and test the above example on both Mozilla Firefox and Internet Explorer, you’ll see that they render this web page gradient as expected. This means that the corresponding “gradient” CSS class really works!

Well, at this point, I assume that building cross-browser web page gradients using the “AlphaImageLoader” filter is a familiar process for you. Thus, taking this into account, it’s time to see how the same approach I followed to create these fancy web document gradients can be applied to certain headers of the document in question.

By extending the use of this approach, you’ll be able to decorate not only the background of a web page, but many other elements of it as well. But, as you may have guessed, this interesting topic will be discussed in detail in the following section. So, jump ahead and read the next few lines. I’ll be there, waiting for you.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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