Building Corner Effects with Transparent Background Images - Building rounded corners using a conventional approach
(Page 2 of 4 )
Indeed, an excellent way to start illustrating how to use transparent background images to build different corner effects is by creating a sample web page that will display the classical rounded corners inside of some of its <h2> headers. To achieve this visual effect I’m going to use a more conventional approach, which involves simply creating a rounded corner background image that will be placed on top of the <h2> headers.
Given that, the definition of this sample web page is as follows:
<!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 rounded corners (traditional approach)</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(rounded_corners.gif) left 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 of the web page</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 of the web page</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 shown above, the code sample displays a simple three-column centered web page, where all of its <h2> headers have been decorated with a rounded corner effect, in this case using only one background image, called “rounded_corners.gif.” To clarify this concept even more, below I included the image in question, so have a look at it:
Quite simple, right? Besides, the look of the pertinent <h2> headers corresponding with this sample web page, after including the previous rounded corner background image, would be similar to the graphic shown below:
As you can see, building rounded corners using a conventional approach is actually a straightforward process that certainly doesn’t merit much discussion here. Nevertheless, the objective of this series is to demonstrate how to achieve the same visual effect using transparent background images.
So bearing this mind, in the section to come, I’m going to reuse the same sample web page that you saw before, but in this case I’m going to decorate it with some attractive rounded corners which will be created with tiny transparent background graphics.
To see how this will be achieved, please click on the link below and keep reading.
Next: Creating transparent background images >>
More Graphic Design Articles
More By Alejandro Gervasio
AT&T devCentral & BlackBerry(r) Webcast Series: BlackBerry and GPS -Build Location Awareness into your BlackBerry Applications, July 10th -1:00PM EST. 
