Nifty Corners Cube

Nifty Corners Cube: introduction

Nifty Corners Cube are a solution to get rounded corners without images, and this third version is build by three main components:

• A javascript file, named "niftycornerscube.js"
• A CSS file, named "niftycorners.css"
• The javascript calls specific for the pages

Now we're now ready to look at the first example: it's a div with big rounded corners thanks to Nifty Corners. As I said before, the CSS file it's added automatically by javascript. In fact, the only reference to an external file in the example is the following:

<script type="text/javascript" src="niftycube.js"></script>

Regarding the third point, as is the javascript calls needed for the page, the code for the example is the following:

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

In bold I've reported the part of the script that depends on the page, and that is the call for the function Nifty. This function is the core of the whole library, and receives two parameters that are the strength point of the script. Parameters have to be specified between quotes and separated by a comma. The first parameter is for the CSS selector that targets the elements to round, while the second parameter is for options for default cases could be omitted. Let's see them in depth.

The parameters

The first parameter is for the CSS selector to targets the elements on which apply Nifty Corners. The CSS selectors accepted are: tag selector, id selector, descendant selector (with id or class) and grouping. The following table show some example:

Selector Example tag selector "p"
"h2" id selector "div#header"
"h2#about" class selector "div.news"
"span.date"
"p.comment" descendant selector (with id) "div#content h2"
"div#menu a" descendant selector (with class) "ul.news li"
"div.entry h4" grouping (any number and combination of the previous selectors) "h2,h3"
"div#header,div#content,div#footer"
"ul#menu li,div.entry li"

Talking about options: they're identified by keywords and they can be specified in any order and number. Let's see them:

keyword meaning tl top left corner tr top right corner bl bottom left corner br bottom right corner top upper corners bottom lower corners left left corners right right corners all (default) all the four corners none no corners will be rounded (to use for nifty columns) small small corners (2px) normal (default) normal size corners (5px) big big size corners (10px) transparent inner transparent, alias corners will be obtained. This option activates automatically if the element to round does not have a background-color specified. fixed-height to be applied when a fixed height is set via CSS same-height Parameter for nifty columns: all elements identified by the CSS selector of the first parameter will have the same height. If the effect is needed without rounded corners, simply use this parameter in conjuction with the keyword none.

We'll meet the selectors and options through the many examples I've prepared. Let's start.