...

View Full Version : rounded edge content backgrounds



marky
06-18-2006, 03:01 AM
Probably the worst thread title, I cant explain it. How can you create round edge graphics, to explain what im talking about, go to www.ebay.com and look where it says (above the search form thing) "you can get it on ebay", see what its in? on the side how its rounded..eh ill just showhttp://h1.ripway.com/chingy6/ebay.JPG

Its like the background, is it a picture? It top left corner has a rounded corner. How do you do this? How do websites such as www.pctools.com make that layout? What i mean by layout os just not to have anything on the sides, and have rounded edges on all 4 corners, and the website is all inside that? Ive always wandered how this was done. Please explain briefly!

Mark

_Aerospace_Eng_
06-18-2006, 04:41 AM
They are all just background images. http://pics.ebaystatic.com/aw/pics/navbar/topLeft_12x12.gif
They make the rounded rectangle using a graphics program and then slice up just the corners or the whole top side. Nifty corners uses JS but JS isn't really needed. http://www.html.it/articoli/nifty/index.html
I'll make an example without using JS. Okay here it is, it uses CSS, to me absolute positioning for the corners in a relatively positioned element is easiest.

<!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>Rounded Corners with CSS and images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#FFF;
color:#000;
}
#container {
width:400px;
margin:40px auto;
position:relative;
background:#00F;
color:#000;
}
.tl {
position:absolute;
top:0;
left:0;
z-index:0;
}
.tr {
position:absolute;
top:0;
right:0;
z-index:0;
}
.bl {
position:absolute;
bottom:0;
left:0;
z-index:0;
}
.br {
position:absolute;
bottom:0;
right:0;
z-index:0;
}
.text {
margin:0;
padding:10px;
position:relative;
z-index:1;
text-align:justify;
}
</style>
</head>

<body>
<div id="container">
<img class="tl" src="tl.gif" width="12" height="12" alt="" />
<img class="tr" src="tr.gif" width="12" height="12" alt="" />
<img class="bl" src="bl.gif" width="12" height="12" alt="" />
<img class="br" src="br.gif" width="12" height="12" alt="" />
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</body>
</html>
Attached are the images and the psd file.

cperkins
06-19-2006, 09:50 PM
I wrote an extension for DreamWeaver for doing these (see my sig). It creates the graphics, writes the HTML and CSS, everything is XHTML 1.1 valid, and the rects can be used as containers, and they work in liquid layouts, etc. It supports bordered round cornered rects as well as outer and inner shadows.

Chris Perkins
Media Lab, Inc.
http://www.medialab.com/wellrounded



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum