Home arrow Graphic Design arrow Page 4 - 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 - Creating rounded corners with transparent background images
(Page 4 of 4 )

In accordance with the concepts deployed during the prior section, below I included the definition of the same web page that I used earlier, which in this case displays some basic rounded corners inside all of its <h2> headers, of course via the utilization of the transparent background image that you saw before.

The source code 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 (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(rounded_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 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>


Obviously, the only difference here is that now all of the <h2> headers included in the previous sample web page use the transparent background image that was created in the prior section, in this way achieving the famous rounded corner effect. Below I included  an additional picture that illustrates the visual appearance of a container of the mentioned web page, so you can see more clearly how the rounded corners were created:



So far, so good, right? As you can see, building rounded corners using a few basic transparent images is actually a simple process that can be tackled with minor hassles. Try implementing this approach with your own web sites. Hopefully, you will feel very pleased with the final results.

Final thoughts

In this first installment of the series, you hopefully learned how to use some basic transparent background images to create the popular rounded corner effect on a given web page. As you saw previously, this approach is very flexible and easy to follow. This implies that other effects can be built, only changing the shape of the images in question.

In the next part of the series, Iím going to show you how to implement a concept to build angled corners in different web page elements.

Now that youíve been warned, you wonít want to miss it!


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.

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