More Nifty Corners

20 marzo 2006

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:

  1. CSS file for the screen
  2. CSS file for the print
  3. Javascript library to get Nifty Corners
  4. 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:

<link rel=”stylesheet” type=”text/css” href=”niftyCorners.css”>
<link rel=”stylesheet” type=”text/css” href=”niftyPrint.css” media=”print”>
<script type=”text/javascript” src=”nifty.js”></script>

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:

<script type=”text/javascript”>
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded(“div#nifty”,”all”,”#FFF”,”#D4DDFF”,”smooth”);
}
</script>

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:

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

Let’s see them in depth.

Se vuoi aggiornamenti su More Nifty Corners inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su More Nifty Corners

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy