Getting rounded corners on a webpage often means making custom pieces of images to “pad” the edges. It is tedious and increases the size of the page due to the additional images.
Nifty Corner Cube is a library of CSS and javascript that can help you create rounded corners without any additional images. (Examples: link1, link2, link3) With only two parameters (one optional), it is very easy to integrate with existing website. The link above explains how to use the package, however, let’s explore how it is done.
It all comes down to this: optical illusion. The idea is to “simulate” rounded corners with rectangular blocks. As you may already know, circles drawn on the computer screen are really just small square pixels lined up in a circle-like shape. So to achieve rounded corners, Nifty Corners uses varying length of horizontal lines, starting from the shortest from the top and increases as it moves down. And with a little as 3-4 horizontal lines, it is possible to achieve rounded corners.
Comments
I went out and looked at this stuff. The look is really nice. The
only thing I don't like is the fact that you activate it by calling a
JavaScript function from window.onload -- which itself isnt exactly terrible,
but can be a nuisance because a) there's only one window.onload per
page and you often need to stack things up in there, and if you are
using prototype.js or other Ajax stuff it can get confusing, and b)
it's one more thing you have to remember to do on each page. However,
in my mind those minuses are outweighed by the ease...
I totally agree. It is possible to do it without any javascript, as seen in the prototype here by the same person. However, it becomes a trade off between less code and javascript.
There is also example 13 NiftyLoad that addresses this issue by preserving the previous onLoad. However, this wouldn't help if something steps on Nifty's onLoad.
My preference is to use Dojo's event framework and simply "connect" to the onload event.
Post new comment