Nifty Corners: rounded corners without images

Stripe it to get it rounded

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:

<div id="container"><b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b><b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b></div>

And here's it the basic CSS:

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

You can see the final effect on this simple example. A few words on the use of the <b> element. I needed an inline element to obtain the rounded corners, since it could be nested in almost every kind of tag mainting the markup valid. So the choice fell on b because it doesn't have semantical meaning and it's shorter than span, like Eric Meyer said.

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.

Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.

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.

Easy, isn't it? But we can do much better.

Looking forward with DOM

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 we'd like to maintain the HTML clean and light.

Nifty Corners with CSS and Javascript

So, the next step was to provide the unnecessary <b> elements with javascript and DOM making some functions to get rounded corners on almost every element on the page without adding a single line of extra HTML or CSS apart from the basic rules we saw. Let's have a look at the example with Nifty Corners. As you can see from the source code, no extra markup is in it. The solution is a combination of CSS and Javascript. 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 first 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:

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

The javascript functions

If you see the code of the example, you'll notice that I left embedded the CSS and part of the javascript to show how the page is build. Let's 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:

A CSS selector that indicates on wich elements apply the function
Outer color of the rounded corners
Inner color of the rounded corners
an optional fourth parameter, that if is setted to "small" would render small Nifty Corners

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:

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

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. Let's see an example:

window.onload=function(){
if(!!NiftyCheck())
return;
Rounded("div#header","transparent","#C3D9FF","small");
}

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.. let's see some examples.

The examples

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:

window.onload=function(){
if(!NiftyCheck())
return;
/* here the calls to add Nifty Corners */
}

Now, let's begin!

Example one: a single div

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

Rounded("div#nifty","#377CB1","#9BD1FA");

Example two: 2 divs

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

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4");

Example three: small corners

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

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");

Example four: newsboxes

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

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF");

Example five: transparent, tabbed menu

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

RoundedTop("div#nav li","transparent","#E8F0FF");

Example six: a liquid image gallery

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

Rounded("div#minipics li","#DDD","#FFF");

Example seven: rounding a form

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

Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");

Example eight: final example

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, let's see its content:

window.onload=function(){
if(!NiftyCheck())
return;
RoundedTop("div#container","#FFF","#e7e7e7");
RoundedBottom("div#container","#FFF","#E9F398");
RoundedTop("ul#nav li","transparent","#E8F0FF");
Rounded("div#box","#C0CDF2","#E4E7F2");
Rounded("div#minipics li","#C0CDF2","#FFF");
RoundedTop("div.gradient","#C0CDF2","#B8B8B8");
RoundedBottom("div.gradient","#C0CDF2","#ECECF2");
}

A good practice is in fact avoiding using embedded javascript or CSS in the head section.
Quite easy, isn't it? If we'd use one of the css techiques based on background images, probably we'd 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.

Download

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

You don’t use pop-ups.

Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
You don’t change users’ window size.

The same argument as the one against pop-ups holds. Some browsers, e.g.
Internet Explorer, saves the browser dimensions and uses them for
further browser sessions.
“it’s just plain inconsiderate to assume that you know better than the
user how their software environment should be configured?”
You don’t use too small font sizes.

Long passages are harder to read, and to read brief sentences readers
need more time. It holds also for links, buttons, forms, search boxes
and other elements. Good news — in Web 2.0 the opposite is the case.
You don’t have unclear link text.

Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
You don’t have dead links.

There are too many of them anyway; why would you want to point your visitors to a dead end?
You have at most one animation per page.

If blinking images are wide-spread through the site, it’s extremely
hard to focus on one single site element. Give your visitors an
opportunity to perceive your content. Using animated ads, don’t place
them right along your articles.
You make it easy to contact you.

Maybe because you just don’t want to be contacted, but If visitors do
want to get in touch with you, but can’t find any contact information,
you lose their interest and trust. Disastrous for online-shopping, a
missed opportunity for the rest.
Your links open in the same window.

Visitors want to have control over everything what happens in their
browser. If they’d like to open a link in a new window they will. If
they don’t want to, they won’t. If your links open in a new window you
make the decision which is not your decision to make.

UI & Flash

Thursday, June 12, 2008

smooth accordion effect with yahoo UI

Tools for IE

Wednesday, March 19, 2008

rounded corners without images

Nifty Corners: rounded corners without images

Looking forward with DOM

Nifty Corners with CSS and Javascript

The javascript functions

The examples

Example one: a single div

Example two: 2 divs

Example three: small corners

Example four: newsboxes

Example five: transparent, tabbed menu

Example six: a liquid image gallery

Example seven: rounding a form

Example eight: final example

Download

8 Usability Check-Points You Should Be Aware Of

Tuesday, November 6, 2007

toggle visibility for a DIV

Contributors

Delicious

UI Reference

Flash Reference

Labels

Blog Archive