The first line is needed to link the nifty corners library, while the others are for the specific page. Background colors of the page and the div id="box" are detected automatically by the script. Another thing to note is that the padding of the div (20px on vertical sides in this case) is preserved.
The part reported in bold is the call to the Nifty function. For the sake of brevity, starting from the next example, I'll report just the calls for this function, but please keep in mind that these have to be incorportated in an embedded script tag or, even better, in an external js file.
Example 2: two divs
In the second example nifty corners were used to round two divs with one single call:
Nifty("div#content,div#nav");
In this case just the first parameter has been used, as is the CSS selector with grouping: the two id selector are separated by a comma. The second parameter hasn't been used, therefore nifty corners will be of medium size (5px) and with antialias by default.
Example 3: transparency
In the example three nifty corners were applied on a div with a gradient background. In such cases the use of inner transparency could be really useful, and will be obtained via the transparent option. Let's see the javascript call:
Nifty("div#box","transparent");
The transparency option is compatible with all others, and is used by default on elements with no background-color set.
Example 4: nifty tabs
The fourth example is one of the major request on nifty corners: a tabbed menu without images. The javascript call is the following:
Nifty("ul#nav a","small transparent top");
Links are rounded on the top side, with small and transparent inside corners. Inner transparency is essential for the rollover effect. In the case rollover with background-color is not needed, here's a small variant where each tab is smooth-rounded and has got a different color. The js call in this case is:
Nifty("ul#nav a","top");
There's a thing to highlight, as is the fact that in both examples the tabs are perfectly elastic, since they're em-dimensioned.
Example 5: nifty buttons
In the fifth example a mini-navigation, suitable for blogs and such, is obtained with nifty corners. The code is the following:
Nifty("ul.postnav a","transparent");
In this markup, a class for the buttons has been used, so it would be possible to get several sets of of link-buttons in the same page. On the nifty corners side, the descendant selector with a class has been therefore used.
Example 6: boxes
In the sixth example nifty corners are used to round six divs with fixed height and bold corners. Each of div has a different color, even the lower-right one which is white like the background of the page. Antialias is automatically done, and padding of the list-items, both vertical and horizontal, has been preserved. But in order to honour the fixed height specified via CSS, the fixed-height keyword has to be specified. Here's the only js call used:
Nifty("div#about li","tl bottom big fixed-height");
Example 7: nifty columns
With the seventh example we introduce one of the biggest new features of nifty corners: nifty columns. This feature allow to get a faux-column effect without background. The option that does the trick is same-height, and the elements must be specified within the first parameter. The call for the example is:
Nifty("div#content,div#nav","same-height");
The option same-height tells the script to detect the height of the elements targetted by the css selector and to assign them the same height, as is the maximum value detected, without the need for background-images.
Example 8,9 and 10: more nifty columns
The examples eight, nine and ten are built on the same markup, which is the following:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
