More Nifty Corners

Alessandro Fulciniti’s More Nifty Corners is an improvement of his original Nifty Corners technique that was published three weeks ago. This new version of the image-less rounded corner technique adds support for anti-aliasing, borders, application/xhtml+xml and more.

Posted on April 5, 2005 in CSS, JavaScript, Quicklinks

Comments

  1. It should be noted that Alessandro (the original author) created the updated version as well. Maybe it’s obvious, but I thought it was a different author that published the updated version (since there was enhancements over the last few weeks).

    Kudos to Alessandro for this great trick, now if I could just bring myself to use it. I’m going back and forth over the idea of Javascript for layout. I know one could argue both ways on this, since the effect could be acheived without any scripting.

  2. Great work! Thank you Alessandro.

  3. Thanks for passing this on, Roger! I’ve stayed away from rounded corners of sorts until now because I find it silly to botch up an HTML elemen with tons of markup to achieve this effect. This is quite an interesting approach, though.

  4. 1. JavaScript add a complexity in practice, and really…why restrict yourself from using available technology.

    However with that said, it does pose an interesting issue in performance. Yes, the page may stream faster (in the http request), with no images and streamline css. But, then there is the client-side execution of all those js calls to that function to create those round corners.

    hmmm…

  5. April 6, 2005 by brian

    I just implemented the javascript on a gallery site to show thumbnails of pictures with rounded corners like old fashioned slides. The end effect is nice and with a few thumbnails, it looks great. But as I added images to the gallery, the time it took for the browser to modify each li tag in the thumbnail list became too long and it ended up showing unrounded corners until all images loaded. In all, I think I may go back to my old method for this application but use it for rounded boxes and tabs. Cool trick.

  6. May 20, 2005 by Janischka

    The link dosen’t seem to work. Is it possible to find the information elsewhere?

  7. May 20, 2005 by Roger Johansson (Author comment)

    The link is working now. Guess it was just a temporary glitch.

  8. Does anyone else get IE errors when they run the nifty.js script on their site?

    I get this error:

    Line: 89 Char: 1 Error: Invalid property value Code: 0

    Which relates to this line:

    89 for(i=1;i

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.