Looking forward with DOM

In the example we saw how to get rounded corners without images, sparing about 6-8Kb of page weight. But we love webstandards and semantic markup and we"d like to maintain the HTML clean and light.

数据挖掘实验室

Nifty Corners with CSS and Javascript

So, the next step was to provide the unnecessary <b> elements with javascript and DOM making some functions to get rounded corners on almost every element on the page without adding a single line of extra HTML or CSS apart from the basic rules we saw. Let"s have a look at the example with Nifty Corners. As you can see from the source code, no extra markup is in it. The solution is a combination of CSS and Javascript. The technique is made up of four essential parts:

1. CSS file for the screen
2. CSS file for the print
3. Javascript library to get Nifty Corners
4. the javascript calls to round the elements you want

The first three components just don"t need changes, whatever you want to accomplish. They need just to be declared in the head section of any HTML page like this:

数据挖掘工具

<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>
 数据挖掘交友 

To understand how to implement the fourth part, you need first to understand how the javascript library for Nifty Corners is implemented. Don"t worry: you aren"t requested to know javascript to use Nifty Corners...

The javascript functions

If you see the code of the example, you"ll notice that I left embedded the CSS and part of the javascript to show how the page is build. Let"s see the embedded javascript code:

数据挖掘交友

<script type="text/javascript">
 window.onload=function(){
 if(!NiftyCheck())
  return;
 Rounded("div#nifty","#377CB1","#9BD1FA");
 }
</script>
 数据挖掘研究院 

The function NiftyCheck performs a check for DOM support and excludes IE5.x PC for running the script. If the test has passed, the Rounded function is called. It accepts four parameters: 数据挖掘论坛

1. A CSS selector that indicates on wich elements apply the function
2. Outer color of the rounded corners
3. Inner color of the rounded corners
4. an optional fourth parameter, that if is setted to "small" would render small Nifty Corners

The real strenght of the function is that is capable of accepting a CSS selector to target the elements to round. The accepted parameters are:

数据挖掘交友

• Tag selector, i.e. "p" or "blockquote" or "h2"
• Id selector, with specified tag of the element: for example "div#content" or "p#news" or "li#home"
• Class selector, with specified tag of the element: for example "div.entry" or "h2.highlight"
• Descendant selector, with some limitation: this has to be composed by an id selector followed by a tag selector. Valid examples are: "div#news div" or "ul#menu li"

About the colors: they should be specified in hex code with # symbol in three or six digits. The outer color could be also set to transparent. 数据挖掘实验室

The fourth parameter is optional and must be setted to "small" to get small rounded corners. Let"s see an example: 数据挖掘工具

window.onload=function(){
 if(!!NiftyCheck())
  return;
 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! 数据挖掘研究院

Rounded("div#nifty","#377CB1","#9BD1FA");
 数据挖掘论坛 

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");
 
数据挖掘研究院
 

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");
 数据挖掘工具 

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");
 
数据挖掘工具
 

RoundedTop("div#nav li","transparent","#E8F0FF");
 
数据挖掘论坛
 

Rounded("div#minipics li","#DDD","#FFF");
 数据挖掘工具 

Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");
 数据挖掘研究院 

<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>
 数据挖掘交友 

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");
}
 数据挖掘交友