Post Archive
› March 16, 2005
Nifty Corners
Great discoveries and write-up by Alessandro Fulciniti in Nifty Corners: rounded corners without images. This is an English translation of an article written for the Italian site http://pro.html.it/.
The idea here is that CSS and some empty b tags are used to render rounded corners at the pixel level without graphics. What makes this interesting is that since it's purely decorative, relying on javascript to render the b tags, thereby removing any trace of markup clutter, seems easily justified. Clean markup and the lack of image load (background, masking or otherwise) makes this quick loading. Check out the detailed explanation and examples in Alessandro's tutorial, you might get as excited to try it as I am.
Comments
1. March 16, 2005 02:05 AM
2. March 16, 2005 08:32 AM
Nate Posted…
Andrew - Yes javascript for presentation, where is the crime? In fact, since we can't count on javascript being available - optional decorative elements seems like a very appropriate use.
The flip side of my argument isn't "can't wait for x to be supported?" but rather - a warning against taking this methodology to it's most ridiculous extreme. Using javascript and the DOM to insert highly complex markup soup could definitely make a site difficult to maintain. Alessandro's work though seems well thought out, clean and modular.
3. March 16, 2005 08:37 AM
Tony Posted…
Nate, that's a brilliant find. What a cool idea. I like it. I'm going to play with this one.
4. March 16, 2005 03:58 PM
Ed Knittel Posted…
It works great for a solid color on a solid color. But what about if you want a rounded border? Say a white rounded border on a black background with an imbedded rounded box inside? Unfortunately, my results show that you're left with a 5px thick border. Forget about a nice think 1px border. But I'm still playing with it and I think that with some Javascript tweaks I could have a working version soon.
Great find, though. This is gonna be fun.
Andrew K Posted…
Umm... Javascript for presentation?
Can't wait for
border-radius? I'm sorry, I must have totally missed this boat...