Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.

html

by Alessandro Fulciniti

More than one year has passed from the first version of Nifty Corners. While it was more of a proof
of concept, and the second version presented some big improvements, there was still something
missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the
previous versions. Let's start.

New features
If you're new to Nifty Corners, I suggest to look in particular at the article on the first version to
understand the concept behind them. Basically, Nifty Corners are a solution based on CSS and
Javascript to get rounded corners without images.

There are several improvements and new features introduced in Nifty Corners Cube which make it
more versatile and simpler to use than the previous versions:

The numbers of parameters has been reduced from four of the first version and five of the
second version to just two, of which one is optional.
It's not necessary specify the colors anymore, since they are detected automatically.
They're easier to integrate into the design process, since the padding (both horizontal and
vertical) of elements to round is preserved
It's easier to use them with other scripts
The support of CSS selectors has been improved and expanded
Just a single line in the head section is now needed for the whole library: even if they're still
based on both CSS and javascript, the presentational CSS for Nifty Corners is loaded
automatically by js
They're now released under GPL licence.

Together with the many novelties, that we'll discover through several examples, two features of
the previous version has been abandoned. First, the support in Internet Explorer 5.0/Win has been
totally dropped. Users of this browser will simply see squared corners, just as users with javascript
disabled. The support remains very good however: the examples of the articles have all been
tested successfully in IE5.5, IE6 and IE7 beta 2 preview, Opera 8.5, Firefox 1.5 and Safari 2.0. I
had to drop even Nifty Corners with borders for compatibility issues I've had with IE and the new
approach of the script.

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"

1 di 8 26/02/2011 15.14
Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.html

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 "h2,h3"

previous selectors) "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

2 di 8 26/02/2011 15.14
Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.html

keyword meaning

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.

Example 1: a single div

The first example has been already presented. The code to round the div with id="box" is the
following:

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

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

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:

3 di 8 26/02/2011 15.14
Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.html

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.

4 di 8 26/02/2011 15.14
Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.html

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:

<ul id="split">
<li id="one">
<h3>Title</h3>
<div>Content</div>
</li>
<li id="two">
<h3>Title</h3>
<div>Content</div></li>
<li id="three">
<h3>Title</h3>
<div>Content</div>
</li>
</ul>

The only things that vary are in fact CSS and the calls to nifty corners, which use nifty columns in
the three cases. In the example height the javascript call is the following:

Nifty("ul#split li","same-height");

In example 9 two calls were used: one for the headings, and one, with the same-height options, for
lower divs:

Nifty("ul#split h3","top");
Nifty("ul#split div","bottom same-height");

If you don't need rounded corners on the lower part, but you'd like to get anyway elements with

5 di 8 26/02/2011 15.14
Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.html

the same height, as in the example 10, simply specify the none option:

Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");

Example 11 and 12: Nifty Corners Layout

We've arrived to two major examples of the article, as is Nifty Corners Layouts. In the example
eleven and twelve nifty corners are used extensively for layout and page elements.

In example eleven, as in the previous examples, I left for ease of consultation the CSS and the
script embedded in the page. The javascript section is the following:

window.onload=function(){
Nifty("div#container");
Nifty("div#content,div#nav","same-height small");
Nifty("div#header,div#footer","small");
}

When the page has loaded, Nifty Corners are applied on container, small and with faux columns on
content and sidebar for navigation, and just small on the footer. The effect o a white border around
all the page is achieved with a padding on the container.

The example twelve represent a two-column layout, tabbed navigation and some elements (like
dates and comments) common in blog design. In this case CSS and javascript are kept in external
files, here is the regarding code in the head section:

<link rel="stylesheet" type="text/css" href="NiftyLayout.css" media="screen">

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

Apart from the CSS, two javascript files are linked in; one is the library for nifty corners, while the
second one contain the specific call for the page:

window.onload=function(){
Nifty("div#menu a","small transparent top");
Nifty("ul#intro li","same-height");
Nifty("div.date");
Nifty("div#content,div#side","same-height");
Nifty("div.comments div");
Nifty("div#footer");
Nifty("div#container","bottom");
}

The option same-height has been used in two cases: on the three boxes of introduction and between
content and navigation. In this second case, rounded corners are not visible, since they're done
with transparency inside because the content has not a background-color specified.

Example 13: NiftyLoad

6 di 8 26/02/2011 15.14
Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.html

We've finally arrived at the last example. One of the frequent reported question is in fact how to
make coexist Nifty Corners with other script, given the fact only one assignation to window.onload is
possible.

In the example 13 an alert message, attached to window.onload, is shown before nifty corners
proceed. This is done thanks to the function NiftyLoad, that will preserve a previous window.onload
function. The javascript section, embedded on the page this time, is the following:

NiftyLoad=function(){
Nifty("div#box","big");
}

In order to make nifty corners work together with other script, you just have to use NiftyLoad
instead of window.onload. Obviously the function could go even in an external file, the only important
thing is that the two script blocks for nifty corners, as is the library and the page-centric calls, are
the last two script blocks of head section of the page. The NiftyLoad function can also be used when
nifty corners are the only script of the page, as is in any of the previous examples we've seen.

Troubleshooting and problem solving

While making Nifty Corners Cube I've tried to mantain the script as simple and robust as possible,
and I hope to have inspired readersthrough the many example,.

The examples was also a way to test cross-browser compatibility, but this doesn't mean one might
never get problems.

Even if javascript knowledge is not necessary, a working knowledge of CSS and HTML is, and it's
also good practice to use always validate the code. If you do encounter problems, the first thing is
to remove temporarily nifty corners and see if they persist. A general approach of development,
that I've used on preparing the examples of this article, is getting the HTML and CSS entirely
written before adding Nifty Corners to the page.

Two features introduced in this version should simplify Nifty Corners usage. Colors are detected
automatically, and could be changed in the CSS without the need to update the javascript calls.
Padding, both vertical and horizontal, is now preserved. Especially for vertical padding, it's
suggested to specify a pixel value at least equal to the size of the corners.

The examples should be a good starting point: one thing to keep in mind is that in some case I've
used ID, but if you'd need more than one element on a page you should use class or descendant
selector, since an id in a page, according to HTML specification, should be unique.

Credits, licencing and download

I'd like to thanks David Lindquist for his help in getting things right in Safari. The idea of nifty
columns was inspired by CSS balanced Columns, a very clever way to get faux columns without
background.

Nifty Corners Cube are released under the GNU GPL licence and were published on the 22 March
2006 both in italian and english.

7 di 8 26/02/2011 15.14
Nifty Corners Cube - freedom to round http://www.html.it/articoli/niftycube/index.html

The examples and code the code is available for download. Enjoy!

8 di 8 26/02/2011 15.14