Thursday July 7

roundme

Every web designer at some point in their life will get the urge to put a scalable box with rounded corners or a drop shadow onto a web page. I know that I have personally tried several different techniques for doing this over the years, with mixed results. While I was redesigning my site this weekend, I happened to discover a new technique by Roger Johansson which is probably the best solution I've found to date. There is only one problem: it is a bit of a pain to create the necessary images and CSS .

So, say you are a designer, and you design a pretty little box (roundedCorners.css), and you want to use it as a background for an adjustable-sized box (like this). In order to do that, you have to output your original design as these two images (roundedCorners.png, roundedBorders.png). Then, to create the CSS (roundedCorners.css), you have to manually calculate a bunch of offsets and padding. This is a pain, so I wrote a script, called roundme, to automatically generate all of this for you.

You can download the script here: roundme.zip.

For now, the script works only on Mac OS X, because I was lazy and used the the only Python-based image processing API I'm familiar with, NSImage via PyObjC. It would not be difficult to port the script to use a portable image library such as PIL or ImageMagick. Any volunteers?

Preparing Your Image

Before you use roundme, you need to supply three things:

1. A single image (in PNG, JPG, GIF, or TIFF format). This image contains the box that will be carved up to make the corners and borders. (Here is an example)
2. Two points which describe the innermost rectangle of the box. This is the area that is surrounded by the corners and border. Here is an illustration of how to find these two points:



3. The width and height of the resulting corners image. Choose the greatest possible width that your rounded boxes could become, and the smallest possible height. It might not be immediately obviously to you why these numbers are needed - read Johansson's post and you'll get the idea.

How to Use roundme

1. Download roundme.zip and unzip it.
2. Make sure you have installed Python (at least 2.3) and PyObjC. Python 2.3 is bundled with Mac OS X as of Panther, but PyObjC is not.
3. Fire up your local friendly command line and enter the directory that contains roundme:

cd ~/Desktop/roundme

4. Call the roundme.py script using the parameters described above. If you haven't created your own image yet, you can use rounded.png, the test image that is included in roundme.zip:

python roundme.py rounded.png --rect '42 42 375 205' --size '1600 200'

5. Open the file roundme.html in your web browser. This file uses the generated images and CSS to help you test and see if you got it right. An online version of the test is here.
6. If you like what you see, grab the files roundedBorders.png, roundedCorners.png, rounded.css, and roundme.js and drop them into your website.

As of right now, I have only tested the output of roundme.py using Firefox 1.0, IE6, and Safari 1.3. If anyone sees any defects in other browsers, please let me know.

And finally, thanks to Roger for coming up with such a clever solution to this longstanding problem!