20 March 2008

Make Your Corners Angled With Transparent Background

Posted by: admin in Uncategorized

Using CSS-based techniques, you can build rounded and angled corners, as well as other noticeable effects by utilizing a few basic transparent background images. Using transparent background images to create different corner effects has an added advantage, since this approach enables you to change the background color of the web page elements that display the affected corners directly via the modification of its CSS styles without having to build a brand new background image.

As you might guess, the procedure is limited to creating a transparent background image with the shape you want and positioning this image inside the web page element that you want to decorate via some basic CSS styles.

As you can see, the above background image has been created in such a way that it has only two solid areas, which logically are the ones that correspond to the respective angled corners. The rest of the image in question is completely transparent. Of course, now that you have learned how to build the related background image aimed at creating a primitive angled corner effect on certain elements of a given web document, you might want to see how this effect looks when applied to a particular container of a sample web page.

After analyzing in detail the previous image, you’ll have to agree with the fact that building angled corners using only one transparent background graphic is actually an uncomplicated process that can be handled with minor problems, even if you’re a web designer taking your first steps into this exciting territory. At this stage, you hopefully learned how to style a particular element of a web page with a basic angled corner effect. However, the end result of this attractive process will be much better liked if you can see how the angled corners can be applied to certain sections of a sample web document.

Here is a sample source code in which <h2> header (in bold) contained in the document in question have been properly styled by using a few simple angled corners.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w5.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w5.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;
}
……………………………………..</div></body></html>

There you got it. The above web page displays a neat angled corner effect, which was achieved by utilizing only one transparent background image. Besides, you are free to introduce your own modifications, so that you can acquire a more solid background in building this kind of effect with some basic CSS styles. As you saw, this technique is really very flexible and easy to learn, even for beginner web designers.

Uncategorized,

Subscribe,

(No Ratings Yet)

121 views

This entry was posted on 20 March 2008 at 2:45 AM and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.