Multithreaded

I’ve updated the theme on my blog to introduce that quintessential web 2.0 feature, rounded corners and I thought I’d share some of my thoughts on this.

For guidance I referred to chapter 3 of Andy Budd’s excellent book, CSS Mastery. I first tried the “flexible rounded-corner box” approach. This wraps three layers of div around the content and uses four images to provide the corners by placing them appropriately as background images. The basic technique is to create images with the correct background colour and use a “sliding window” technique so that as the content size grows or shrinks (say by changing the font size), more or less of the left top and left bottom images are exposed. Since these are of a constant colour the user sees it as the corners moving.

The concept is straightforward so I fired up Photoshop and dived in. My first realisation was how annoying it is to generate the right images with photoshop/image ready (remember, I’m a programmer not a designer). After figuring out that I needed to use Image Ready instead of Photoshop to get the rounded rectangle marquee tool, and searching for several minutes before finding the option to change the radius of the corners, I finally created a nice rounded-corner rectangle. Then I had to chop it up into gifs for each of the four corners, a tedious process.

My assumption had been that I would just need the corners and I could rely on the background colour of the content to fill in the rectangle but after installing the images and CSS I realised this isn’t the case. The top left and bottom left images need to be large enough to fill out the content no matter how tall or wide it gets. I don’t like this as it puts a maximum size on the content box unless I use very large images. I don’t like that kind of constraint. Also, this approach requires that I make different corner image sets for each colour box I might have so I moved on to the next section of the book.

This is entitled “Mountaintop Corners” and takes the “opposite” approach. Instead of filling in the corner, this technique uses gifs to mask off the corner. Basically, I created four images where the outside of the corner is white and the inside is transparent so that the content colour can show through. This is much more flexible in that it can be used on any box on the site regardless of the content colour. The limitation is that I would need to create a different set of corners for each background colour I might be using. In my case, the background is always white so I can get away with one set of corners.

Here’s the result:

Okay, not the most amazing of boxes I’ve seen (hey, no gradients, drop shadows or even anti-aliasing) but somewhat nicer than the rectangular look I had before, I think. Plus, it only took the most minor of tweaking to get it all looking good in FF 1.5, IE 6, Opera 9 and Safari, which is a bonus. All in all it took about an hour to do.

But all this raises the question in my mind as to when CSS will start to include things like rounded corners as native features. It seems bizarre to always be having to jump through these kinds of hoops to get visual tricks like this up and running.