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.
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:
Nifty Corners Cube are a solution to get rounded corners without images, and this third version is build by three main components:
Now we're now ready to look at the first example:
div with big rounded corners thanks to Nifty Corners.
the only reference to an external file in the example is the following:
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 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:
|descendant selector (with id)||"div#content h2"|
|descendant selector (with class)||"ul.news li"|
|grouping (any number and combination of the previous selectors)||"h2,h3"|
"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:
|tl||top left corner|
|tr||top right corner|
|bl||bottom left corner|
|br||bottom right corner|
|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.
The first example has been already presented.
The code to round the div with
id="box" is the
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.
In the second example nifty corners were used to round two divs with one single call:
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.
The transparency option is compatible with all others, and is used by default on elements with no background-color set.
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:
There's a thing to highlight, as is the fact that in both examples the tabs are perfectly elastic, since they're em-dimensioned.
In the fifth example a mini-navigation, suitable for blogs and such, is obtained with nifty corners. The code is the following:
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.
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
has to be specified. Here's the only js call used:
Nifty("div#about li","tl bottom big fixed-height");
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:
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.
The examples eight, nine and ten are built on the same markup, which is the following:
In example 9 two calls were used: one for the
headings, and one, with the
same-height options, for lower divs:
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 the same height, as in the example 10,
simply specify the
Nifty("ul#split div","none same-height");
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.
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.
code in the
<link rel="stylesheet" type="text/css" href="NiftyLayout.css" media="screen">
Nifty("div#menu a","small transparent top");
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.
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 order to make nifty corners work together with other script, you just have
NiftyLoad instead of
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.
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.
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.
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.
The examples and code the code is available for download. Enjoy!