Creating Gradients for Web Page Headers with PNG Images - Linking the gradient CSS class to the structural markup
(Page 4 of 4 )
As I mentioned in the section that you just read, it’s perfectly feasible to apply a PNG-based gradient to all the <h2> headers of a certain web page using the “.sectionheader” CSS class that you learned previously. To do this, the class in question must be linked with all the corresponding headers via a simple “class” attribute.
And speaking of that, the following hands-on example shows how to decorate all of the <h2> headers of a sample web page by using a few basic PNG-based gradients, so pay close attention to it:
<!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>
See how easy it is to apply a PNG gradient to all of the <h2> tags of the previous (X)HTML file? I guess you do! In this case, I simply linked the “sectionheader” CSS class to these header elements, while also implementing the CSS hack that I showed you in the prior section, which makes the gradients display consistently on most browsers.
In addition to the corresponding source code of the earlier example, below I included an image that shows how the section headers of this sample web page look when displayed on Internet Explorer and Mozilla Firefox respectively, so here they are:
They look pretty similar to each other, right? That demonstrates in a nutshell that these cross-browser PNG gradients really work! Okay, don’t take my word for it. Test the previous code sample on your own system, to see the results for yourself. You’ll feel very pleased with them, trust me.
Final thoughts
In this third chapter of this educational journey, I taught you how to implement the same CSS hack that you learned in the previous article, but in this particular case, we decorated the <h2> headers of a sample web page with a few simple PNG gradients.
It’s worthwhile to mention that those gradients use alpha-based transparency, which means that they can be built easily using a PNG graphic that fades to transparent in conjunction with a solid background color.
In the last installment of this series, I’m going to show you how to apply a similar CSS approach with the purpose of styling large sections of a web document. Therefore, I hope to see you there!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
