Creating Gradients for Individual Containers with PNG Images - Creating gradients for several web page headers
(Page 2 of 4 )
A good way to start demonstrating how to construct fancy gradients that can be applied to individual containers in a given web document is by listing the complete source code of the hands-on example that I built in the previous article of the series. The same concept was used, in that particular case, to decorate several headers of a determined web page.
This example also implemented a simple CSS hack that made it possible to display the gradients in question in a true cross-browser fashion. Now let me show you how the example looked originally. Here it is:
<!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 section headers (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;
background: #eee;
}
h1{
padding: 5px;
margin: 0;
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: #fff;
border: 1px solid #ccc;
}
.sectionheader{
padding: 7px 0 8px 10px;
margin: 0;
background: #fff url(bg.png) left center repeat-x;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
}
/* use the * html CSS hack to render an alpha-based transparent background */
* html .sectionheader{
padding: 7px 0 8px 10px;
margin: 0;
height: 100%;
background: #fff;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',
sizingMethod='scale');
}
</style>
</head>
<body>
<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 class="sectionheader">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 class="sectionheader">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 class="sectionheader">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 class="sectionheader">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 class="sectionheader">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, aside from building a basic three-column web document, the previous (X)HTML file is tasked with decorating all of the <h2> headers with a transparent “bg.png” image, which is then tiled horizontally across these elements to achieve the proper visual effect. This task is performed via the definition of a basic “headersection” CSS class, which will be either applied directly to the mentioned headers, or done using the “AlphaImageLoader,” Internet Explorer’s proprietary filter. This depends on which browser is being utilized.
Well, provided that at this point you recall the details of how to apply cross-browser gradients to all of the <h2> elements of the prior sample web page, I think that this is definitely a good moment to jump forward and see how this same approach can be used to style the individual containers of the web page in question.
This process will be very similar to the one discussed above, but in order to learn how it will be performed, please go ahead and read the following section. Don’t worry, since I’ll be there waiting for you.
Next: Styling individual containers of a web document >>
More Style Sheets Articles
More By Alejandro Gervasio
