More Nifty Corners

Link copiato negli appunti

The article on Nifty Corners catched a lot of interest that we didn't expect at all. So, a big Thank you goes to the international webdesign community and in particular Roger Johansson from 456bereastreet.com and Nate Stainer from web-graphics.com that originally launched the link through the blogosphere.

Since its publication, I've worked a lot on Nifty Corners, bringing many improvements: looking back at the solution presented in the first article, seems to me that it was written ages ago. If you hadn't read it, I suggest you to have a look to understand what I'm going to talk about. If you read it, but you're so curious that you couldn't wait, have a look at the final example I prepared for this article. No images were used, just CSS and Javascript.

The news about Nifty Corners

First, I'm going to present briefly the many improvements I brought to Nifty Corners.

The first and major improvement is that I' ve extended browser support (hat tip John Gallant from positioniseverything.net for the font-size: 1px CSS fix!). Now, Nifty Corners are fully supported also in Internet Explorer 5.5, covering a very wide range of modern browsers: the examples that we'll see in this article have been successfully tested in IE6, IE5.5, Opera 7.6, Firefox 1.0 and Safari 1.1. The support for IE5.0 is partial, only classic nifty corners are displayed well, but I got rid anyway of that not-so-good browser sniffing that was used in the first version.

Talking about support: now Nifty Corners work also on XHTML pages served with mime types of application/xhtml+xml (hat tip Roger Johansson for document.createElementNS hint!). There's also a more robust error detection for the script, and an improved support for class selector.

Second, it's now possible choose the corners to round: you can choose to round one to all corners.

The other improvements I did are all based on the use of borders, togheter with the coloured stripes and margins, to get a quite wide variety of effects. While with the first version it was possible to get rounded corners transparent outside, now it's possible to get them transparent inside. A light form of antialiasing is now possible with Nifty Corners, and you can also get nifty corners with edges. Next, I added a basic vertical padding handling that you could find useful in some case.

We'll cover this new features in depth later through ten examples I prepared. But first, let's see how nifty corners works in general and the usage of the main function of the Javascript library.

How Nifty Corners work

Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts:

CSS file for the screen
CSS file for the print
Javascript library to get Nifty Corners
The Javascript calls to round the elements you want

The firts 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:

As you can see, togheter with the support and the possibilities, even the complexity of Javascript and CSS file increased a bit respect the first version, but I've tried to mantain the usage really easy.

The Javascript functions

Let's see the first example: if you see the code, you'll note that I left embedded the CSS and part of the Javascript to show how the page is build. Here's the embedded Javascript code:

The function NiftyCheck performs a check for DOM support. If the test has passed, the Rounded function is called, that is now the only one function that you should call to get nifty corners. It accepts five parameters, that are in order:

A CSS selector that indicates on wich elements apply the function
A string that indicates wich corners to round
Outer color of the rounded corners
Inner color of the rounded corners
An optional fifth parameter, that will contain the options for Nifty Corners

Let's see them in depth.

First parameter: the CSS selector

One of the strenghts of the function is that is capable of accepting a CSS selector to target the elements to round. Are accepted parameters:

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 have to be composed by an id selector followed by a tag selector. Valid examples are: "div#news div" or "ul#menu li"

Second parameter: specifing wich corners to round

Let's see again the Javascript call for the first example:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

The second parameter specify wich corners to round. It accept one or more of the following keywords separated by a space:

all will round all corners
top will round top corners
bottom will round bottom corners
tl will round top-left corner
tr will round top-right corner
bl will round bottom-left corner
br will round bottom-right corner

You can also combine the keywords. For example, you can use the parameter "top br" to round the top corners and the bottom-right one. Note also that both the parameter "top bottom" and "tl tr bl br" are valid to get all the four corners rounded.

Third and fourth parameters: specifying the colors

Let's look again the Javascript call for the first example:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

The third and fourth parameters are used to specifying respectively outer and inner color. They should be specified in hex code with # symbol, in three or six digits. The good news is that they could also be setted to "transparent". While in the first version you could only get the outer color transparent, now you can also get nifty corners transparent inside. Obviously, you cannot get them both. But transparency inside it's really useful for example to play with elements with background, or avoiding specifying inner color but just the outer color.

Fifth parameter: nifty corners options

Here's the Javascript call for the first example:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

As you can see, there's a fifth parameter setted to "smooth", in order to produce lighly smoothed rounded corners. The fifth parameter is optional, and if specified will render nifty corners in different way. There are some keywords that you could use:

smooth will produce lighly antialiased nifty corners: the Javascript library will compute automatically the intermediate color to blend the inner and outer color more gently: so, in this case they must be both be specified.
border (followed by a color in hex code with # symbol, in three or six digits) will make corners with edges. Note that you can also get transparent corners, but just outside the edges.
small will produce small corners, and could be applied to every kind of corners

The vertical padding handling

Before we start with the examples, let me explaing a good feature I've added to Nifty Corners but is behind the scenes. I' ve added a basic vertical padding handling,you can now specify via CSS a vertical padding to the elements to round: The script will automatically eliminate it before adding nifty corners. This is very useful for three reasons: it's easier adopting nifty corners on existing pages, the pages will degrade better if Javascript is disabled and also to avoid that jump-effect when the page wich use nifty corners is loaded. Optimal values are 5px vertical padding on the elements to round if you're planning to use normal nifty corners and 2px for small ones.

Now that we've covered all the points, we can start with some example.

The examples

Now the fun part.. As in the first article, I did some examples to show the possibilities of Nifty Corners. In this case you'll see how the possibilities increased. For each example will be reported on this page just the Javascript calls to Rounded function, 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 start.

Example one: a single div with antialias

This is the example we saw in the opening. The Javascript call is:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

In this case all corners were rounded with a very light antialiasing. Someone over the net tried to produce really antialiased rounded corners without images modifying heavily my original script. But I think that the solution I'm presenting here is the best I could find to blend outer and inner colour more gently, without overcharging too much the CSS, the Javascript, the computing time and the DOM tree of the page.

I'm not so radical about the use of images, and I think that in those case where real antialised rounded corners must be used in a page, the traditional html+CSS+background images method will still be the best way to get them.

Example two: brothers divs

In this example, two divs were rounded. The js calls are:

Rounded("div#content","all","#FFF","#9DD4FF","smooth");
Rounded("div#nav","tr br","#FFF","#FFC79D","smooth");

Note that the small one has only right corners rounded.

Example three: transparent by nature

This one is one of the most significant improvements to nifty corners. You just have to specify outer color and "transparent" for the inner color and you got it:

Rounded("div#box","all","#6385D8","transparent");

A thing about transparency inside: while you can choose the corners to round, and get small and transparent inside nifty corners, it's not possible to get them smoothed or with edges.

Example four: with or without them

In this example, I put two divs sharing the same class in a page. One of them has got an id too, but no additional CSS rules, to show how nifty corners with edges are rendered. In this case two calls to Rounded function are needed, in order to get different inner color for top and bottom corners:

Rounded("div#nifty","top","transparent","#FFC5FF","border #C0C0C0");
Rounded("div#nifty","bottom","transparent","#F0F0E7","small border #C0C0C0");

Note that after the border option should follow the color of them, and at the bottom I setted small corners with edges. A small note on the use of borders: the script will automatically add horizontal borders to the direct children of the element(s) to round with edges, avoiding you to specify them in the CSS and allowing a better degradation in the case Javascript is off but CSS is on. So, if you' re having bad rendering issues with borders, the easiest way to fix is adding an extra wrapper to contain everything of the element to round. This solution is also suggested when the element to round contains lot of elements as direct children, since the script traverses them all for adding vertical borders and could take a little time.

Example five: color explosion

In this example, I used descendant selector and transparency inside to round four elements in one shot, but just on two opposite corners. Here's the only Javascript call:

Rounded("div#news div","tr bl","#FFF","transparent");

Example six: elastic nifty

In this example I wanted to underline that most of the examples that use nifty corners won't be possible just with the use of background images and CSS rules, but sometimes extra wrappers just for presentational purpose are needed to serve the backgrounds in a traditional way. The markup of this example is, like others, minimal and semantical, and the newsboxes are dimensioned with em to get an elastic effect. Transparency was also used. The js code for this example is:

Rounded("h3","all","#FFF","#efeadc","small border #999");
Rounded("div#news h3","all","#FFF","transparent");

Note in that case that borders are added around h3 elements. The script in fact is able to add border in elements that just contains text inside, by wrapping it around a span with dislay:block setted throug DOM. However, note that nifty corners will fail if the element to round contain a mix of elements and anonymous (both inline and block) boxes as direct children. The solutions is even in that case are two: avoiding the use of borders, or adding an extra wrapper to contain it all.

This example show the power of the discendant selector and transparency to get a tabbed menu with borders through a single Javascript call:

Rounded("div#nav li","top","transparent","#BEFF9A","border #508F0F");

Example eight: navigational leaves

With the same markup of previous example we could get also a quite unordinary and appealing menu with borders. Here's the only Javascript call needed:

Rounded("div#nav li","tr bl","transparent","#9ABEFF","border #3562B1");

Example nine: a floated image gallery

This example is quite similar to one we saw in the first article, but will render much better for two reasons. First, antialising is provided. Second and more important, the vertical padding, initially setted with CSS, is automatically removed by the script. This in order to avoid the jump effect of the thumbnails while the page is entirely loaded and Javascript starts to run.

The transition now, as you can see, is quite similar to the loading of background images in a traditional manner. Note that in the CSS of the page, a vertical padding of 5px on top and bottom is added to list-items that will be removed by the script for nifty corners. Using vertical padding in CSS and letting them be automatically removed by the script is higly reccomended in particular when using nifty corners on heavy pages or with images in them, even also for a better degradation if Javascript is disabled. Let's see the Javascript call used:

Rounded("div#minipics li","all","#C7C7F2","#FFF","smooth");

Example ten: Nifty layout

So we arrived at the last example, a layout using nifty corners. I really enjoyed preparing it without using images at all but just nifty corners. In this case, I did not used embedded CSS or Javascript. The head section contains the following lines:

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

The file layout.js contains all the Javascript calls, let's see its content:

window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#header","bottom","#D6DEEC","#84B7FF","smooth");
Rounded("div#header h1","bottom","#84B7FF","#657DA6","small smooth");
Rounded("div#content","tl bottom","#D6DEEC","#FFF","smooth");
Rounded("div#nav","tr bottom","#D6DEEC","#95B3DE","smooth");
Rounded("div#sidenotes","all","#D6DEEC","#B1C0D5","smooth");
Rounded("form","all","#D6DEEC","#B4CEF7","smooth");
Rounded("blockquote","tr bl","#FFF","#CDFFAA","border #88D84F");
Rounded("div#relax","all","#FFF","transparent");
Rounded("div#footer","all","#D6DEEC","#CCCCCC","small border #fff");
}

A good practice is in fact avoiding using embedded Javascript or CSS in the head section. One thing about this last example: it's curious note that we got thick nifty corners around the header by rounding both the header and the h1 inside it.

Before concluding: try to view how would render the page with Javascript disabled to see how it degrade gracefully. In making this final example, I simply started with this.

Conclusion and download

When the first article was published, I knew there were many improvements to be done, and now I think this version is a stable and definitive release. Nifty Corners are free, but no modifications to the script and/or the CSS are allowed. This article and Nifty Corners are fully copyrighted by HTML.it and Alessandro Fulciniti, and were published on the 6th of April 2005 both in Italian and in English. You can contact the author writing to a.fulciniti[at]html.it

You could download sources and examples here. Enjoy!

Indice lezioni