Rounded corners are the bane of a website designer's life. I can take them or leave them; for some reason, graphic designers seem to swoon at the slightest hint of revealed shoulder. And, while Mozilla has a CSS extension which does them, and CSS 3 standardises it, if you want them cross-browser then you used to be stuck with tables, or wrapping your divs in up to three others and using background images.
However, another alternative is script. If your site already requires JS, then you can now have lovely rounded corners in all modern browsers using a simple script and CSS include without the need for extra markup.
Posted by gerv at March 25, 2005 2:54 PMTrouble is you still need meaningless markup to implement it.
Posted by: Robin at March 25, 2005 3:36 PMExactly. This is just a mess. On one project I was working on, I wanted smooth corners without all the fuss, so I wrote a piece of script that will apply corners to any image, on the fly.
Literally, all you have to do is put some inline javascript that says:
apply_corners("object_name", true, true, true, true, "images/blue");
The first parameter is the object name, the next four tell it which corners to apply(in this case, all of them) and the last one is what folder the corners are located in. (so that you can have different colors for different images, for example)
The outside script will automatically append the images to the document and position the corners precisely where they need to be. No extra coding is necessary, it works in every Javascript capable browser I've been able to get my hands on, and non-Js browsers won't even notice something's missing.
I've been pretty pleased with it and have been meaning to post it online somewhere.
Posted by: $cir at March 25, 2005 3:45 PMNice, thanks for the link.
L
Posted by: Laurent Duperval at March 25, 2005 3:48 PMYou can also use xbl for this:
http://wargers.org/xbl/rondehoek/roundcorners.htm
http://wargers.org/xbl/rondehoek/
Robin: how far did you read? The final solution presented doesn't require any extra in-page markup.
$cir: but what you outline is almost exactly what the final solution presented on that page does (although he doesn't use images).
Posted by: Gerv at March 25, 2005 6:59 PMGerv, I'd view all the 's as extra in-page markup and I tend to agree with Robin here.
Posted by: David Tenser at March 25, 2005 8:30 PMOops, I wasn't aware that your comments allowed HTML. There's supposed to be a <b> there, not actually making the text bold.
Posted by: David Tenser at March 25, 2005 8:31 PMDavid: I don't see what the problem is here - arguably, it adds extra in-page markup, but since it's dynamically added (notice that you don't see it with a "view source") I'd argue that it's actually a further separation of content and presentation. The page remains remarkably maintainable and all it takes are a few javascript calls. Not too shabby, imo.
Posted by: brooks at March 25, 2005 9:10 PMOops, I stand corrected. Not far enough obviously :)
Posted by: Robin at March 26, 2005 1:05 AMThat makes two of us, Robin. Great code then. :p
Posted by: David Tenser at March 26, 2005 8:48 AM