Stripe it to get it rounded

整理日期：2007年08月19日【字体：大中小】

Rounded("div#header","transparent","#C3D9FF","small");
}

I' ve provided also two additional functions that you could find very useful: RoundedTop and RoundedBottom that receive the same parameters of the Rounded function and allow to get rounded corners just on the top or on the bottom of page elements, or all four corners but with upper ones that differ in color from the lower.

Now.. let's see some examples.
The examples

Now the fun part.. I did some examples to show the possibilities of Nifty Corners. For each example will be reported on this page just the javascript calls to Rounded, RoundedTop and RoundedBottom functions, but keep in mind that these calls should be included in the following code:
window.onload=function(){
if(!NiftyCheck())
　return;
/* here the calls to add Nifty Corners */
}

Now, let's begin!
Example one: a single div

This is the example we saw in the opening. The javascript call is:
Rounded("div#nifty","#377CB1","#9BD1FA");
Example two: 2 divs

In this example, two divs were rounded. The js calls are:
Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");
Example three: small corners

In this example the heading has small rounded corners. The code:
Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");
Example four: newsboxes

In this example we'll see how to make 2-colour newsboxes. The code is:
RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");
Example five: transparent, tabbed menu

伊图教程网[www.etoow.com]
http://www.etoow.com/html/2007-08/1187531277-1.html

Tags：

Stripe it to get it rounded
'http://www.etoow.com/html/2007-08/1187531277-1.html

最新文章教程

This example show the power of the discendant selector and transparency to get a tabbed menu with a single javascript call:
RoundedTop("div#nav li","transparent","#E8F0FF");
Example six: a liquid image gallery

I rounded-framed an unordered list used for an image gallery here. The javascript call is:
Rounded("div#minipics li","#DDD","#FFF");
Example seven: rounding a form

In this example, I rounded a form and its labels with two js calls:
Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");
Example eight: final example

This is the final example wich uses some of the techniques we saw in the previous ones. In this case, I did not use embedded css or javascript. The head section contains the following lines:
<link rel="stylesheet" type="text/css" href="roundedPage.css">
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript" src="final.js"></script>

The final.js contains all the javascript calls, let's see its content:
window.onload=function(){
if(!NiftyCheck())
　return;
RoundedTop("div#container","#FFF","#e7e7e7");
RoundedBottom("div#container","#FFF","#E9F398");
RoundedTop("ul#nav li","transparent","#E8F0FF");
Rounded("div#box","#C0CDF2","#E4E7F2");
Rounded("div#minipics li","#C0CDF2","#FFF");
RoundedTop("div.gradient","#C0CDF2","#B8B8B8");
RoundedBottom("div.gradient","#C0CDF2","#ECECF2");
}

A good practice is in fact avoiding using embedded javascript or CSS in the head section.

Quite easy, isn't it? If we'd use one of the css techiques based on background images, probably we'd used 18 images, maybe some extra and non-semantic wrapper and a lot of css declaration. Could you imagine the kilobytes that were spared? Probably, about 18-20Kb or so.