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.
- Previous post: 404 oddities
- Next post: Class Presentation
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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.
Great work! Thank you Alessandro.
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.
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...
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.
The link dosen't seem to work. Is it possible to find the information elsewhere?
The link is working now. Guess it was just a temporary glitch.
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
Sorry, comments are closed for this post.