Lavora con noi

Web design

Siti tematici

Speciali

Web Design » Articoli » Web design

Pagine:

RSS

More Nifty Corners

di: Alessandro Fulciniti 06 Aprile 2005

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.

Example seven: transparent, tabbed menu. Now with borders.

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:

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!