Roundy
June 1st, 2009
This post is in homage to my old page, a triumph of curvaceousness. May it sleep roundly.
As any usability expert will tell you, the foundation of sound web page design is rounded corners. Their smooth curves lend an organic, almost sensual feel to a site, while other pages are un-navigable morasses of right angles.
Rounded corners are easy with tables and images! But tables make your page Web 2.0-incompatible, so most browsers cannot render it.
So when I decided to get some roundy corners for myself, I looked around, and the best I was able to find was Nifty Corners. There’s a lot to like about Nifty Corners, but look what happens if you try to make them overlap or put them on a, say, not-fixed-color background:
Notice that the corners of the boxes suffer. The problem is that the area around the corner cannot be drawn transparently – it needs to be over a fixed color. Browser specific extensions would be perfect if they weren’t browser specific.
But I like crazy backgrounds and overlapping boxes. So in a half-hearted effort for geek cred, here’s how my roundy corners worked.
| This is a div: | |
| This is a bordered div: | |
| This is a thickly bordered div: | |
| This is a thickly bordered div with differently colored borders: | |
| This is a div bordered only on the left and right: | |
| This is a div bordered more thickly on the right: | |
| Closer: | |
| Closer: | |
| Contact: | |
| This is a bunch of divs in a stack: | |
| This is a bunch of divs in a stack with different right border widths: | |
| This is a bunch of divs in a stack with different right border widths, set to float right: |
|
| Smaller: |
|
| Smaller: |
|
| One pixel high! |
|
| Make the left border pastel red to soften the edge. Tweak the border widths to get the desired curve. Add a solid div on top: |
|
| Four corners: |
|
| Connect the top and bottom with one div each: |
|
| Add a div in the center where stuff goes: |
|
| And the stuff doth go: |
Yo mama!
|
| Broken apart to show some of the pieces: |
Yo mama!
|
| These overlap nicely (at least in Safari, IE6, and Firefox), respect z-order, and work well with non-solid backgrounds. They do not require images, tables, or JavaScript. |
Hey! Flexible widths!
But but but…
- Isn’t that, like, a humongous flood of markup? Won’t the page take a long time to download?
Well, I worried about that too. But happily, all modern browsers support gzip compression – and boy does it work! Even though my last posting with comments is 382 KB in size, you only need to download 19.8 KB (Mac users can look in Safari’s Activity Viewer for the download size). So it ends up being smaller than, say, Yahoo!’s home page – and that’s just the HTML, not even counting all of its images. As a result, the page loads quite fast.
- Well, don’t all those divs make the page unmaintainable?
Yeah, I suppose so. I use a script to generate these boxes, so the source is readable to me – even if the generated HTML isn’t.
