www.home313.com


Nifty


This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube.

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesnt requires images, extra markup nor CSS. Lets start.

The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. This is the markup to get a rounded div:

The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.

The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. It fails on IE 5.x PC.

In the example we saw how to get rounded corners without images, sparing about 6-8Kb of page weight. But we love webstandards and semantic markup and wed like to maintain the HTML clean and light.

The first three components just dont need changes, whatever you want to accomplish. They need just to be declared in the head section of any HTML page like this:

To understand how to implement the fourth part, you need first to understand how the javascript library for Nifty Corners is implemented. Dont worry: you arent requested to know javascript to use Nifty Corners...

If you see the code of the example, youll notice that I left embedded the CSS and part of the javascript to show how the page is build. Lets see the embedded javascript code:

The function NiftyCheck performs a check for DOM support and excludes IE5.x PC for running the script. If the test has passed, the Rounded function is called. It accepts four parameters:

The real strenght of the function is that is capable of accepting a CSS selector to target the elements to round. The accepted parameters are:

About the colors: they should be specified in hex code with # symbol in three or six digits. The outer color could be also set to transparent.

The fourth parameter is optional and must be setted to "small" to get small rounded corners. Lets see an example:

I ve provided also two additional functions that you could find very useful: RoundedTop and RoundedBottom that receive the same parameters of the Rounded function and allow to get rounded corners just on the top or on the bottom of page elements, or all four corners but with upper ones that differ in color from the lower.

Now the fun part.. I did some examples to show the possibilities of Nifty Corners. For each example will be reported on this page just the javascript calls to Rounded, RoundedTop and RoundedBottom functions, but keep in mind that these calls should be included in the following code:

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

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

In this example the heading has small rounded corners. The code:

In this example well see how to make 2-colour newsboxes. The code is:

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

I rounded-framed an unordered list used for an image gallery here. The javascript call is:

In this example, I rounded a form and its labels with two js calls:

This is the final example wich uses some of the techniques we saw in the previous ones. In this case, I did not use embedded css or javascript. The head section contains the following lines:

The final.js contains all the javascript calls, lets see its content:

A good practice is in fact avoiding using embedded javascript or CSS in the head section. Quite easy, isnt it? If wed use one of the css techiques based on background images, probably wed used 18 images, maybe some extra and non-semantic wrapper and a lot of css declaration. Could you imagine the kilobytes that were spared? Probably, about 18-20Kb or so.

You could download the zip file containting the script, the html and the css of the example that were presented here.

James Webb Young wrote about 40 years ago in his little gem "A technique for producing Ideas":

So, I think the idea about Nifty Corners wouldnt have been possible without these readings in past or recent times:

Html.it is the most known and visited webdesign portal in Italy, providing guides, tutorial, forums in every field of webdesign and programming throught its portal and targetted sub-sites. webdesign, the sub-section that host this article, is specialized in webdesign, CSS, javascript, Search Engines, Photoshop and many other topics with more than 500 article published.

I was born in northern Italy in 1975.