Styling Web Page Headers with Transparent Background Images - Review: building angled corners using a transparent background image
(Page 2 of 4 )
Before I start explaining how to use some simple background images to style the respective headers of a sample web page, first I’d like to refresh the core concepts regarding the creation of angled corners, which were discussed in detail in the previous article of this series.
Put in a simple way, I used a basic background image, which was useful for incorporating the aforementioned angled corners into the structure of a basic web document. The respective CSS styles and structural markup corresponding to the document in question had the following signatures:
<!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 angled corners (uses transparent background image)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #ccc;
}
h1{
padding: 5px;
margin: 0;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
}
h2{
padding: 7px 5px 8px 5px;
margin: 0;
background: #6cf url(angled_corners_transp.gif) center center no-repeat;
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: #ffc;
}
#navbar{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #fff;
}
#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: #ffc;
}
.contbox{
padding: 10px;
background: #6cf;
}
</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>Left column</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">
<h1>Center column of the web page</h1>
<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 id="rightbar" class="rightcol">
<h2>Right column</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’ll surely recall, the entirety of the <h2> headers included in the previous (X)HTML file were properly styled with the angled corners that I mentioned earlier, in this way providing them with a more appealing look and feel. Based upon the implementation of this neat corner effect, one basic container element included in the prior web document had the following visual appearance:
So far, so good, right? At this point I should assume that building angled corners using a simple background image is already a familiar process to you. Thus, considering this fact, it’s time to leap forward and demonstrate how to use the same approach that you learned previously, but in this case to create some attractive web page headers, which logically will improve the overall look of any web site.
To find out more about how these web page headers will be adequately styled by way of a single background graphic, please click on the link below and keep reading.
Next: Building some fancy web page headers >>
More Style Sheets Articles
More By Alejandro Gervasio
