Home arrow Graphic Design arrow Page 2 - Building Corner Effects with Transparent Background Images
GRAPHIC DESIGN

Building Corner Effects with Transparent Background Images


Among the vast arsenal of eye-catching visual effects that are used by many modern web sites nowadays, thereís one in particular thatís already considered a true classic by both beginners and seasoned web designers. Of course, in this case Iím talking about the popular rounded corners, which can be built by utilizing a huge variety of approaches, ranging from JavaScript-dependent solutions to CSS-based approaches.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
January 29, 2008
TABLE OF CONTENTS:
  1. · Building Corner Effects with Transparent Background Images
  2. · Building rounded corners using a conventional approach
  3. · Creating transparent background images
  4. · Creating rounded corners with transparent background images

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
GRAPHIC DESIGN ARTICLES

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials