Friday, September 30, 2005

Rounded Corners/Drop Shadow deconstructed

Presenting rounded corners on buttons and text areas in Web pages is, I have recently learned, the Holy Grail of Web UI programming. There are many ways to do it, none are very succinct or simple. They all feel like hacks. You can use Javascript to draw the pixels on the edges, Cascading Style Sheets to combine background colors with images of rounded corners, or you can just use an image creation tool to create buttons and background images with rounded corners. Each has its advantages and disadvantages, and all of them attempt to solve a cosmetic problem that wasn't an issue in the early days of the Web and that should be solved neatly when CSS3 is supported by mainstream browsers.

This topic has come to my attention because the UIs we have on some apps at work are a little clunky and inconsistent and we're close to the release date. So a few of us have spent some time looking at ways to spiff them up a bit. When the product manager sent Visio mock-ups of the pages to us, and I had the buttons to work on, I had no idea the rounded corners would be such a pain. So far I am leaning toward the button image route or recommending we drop the rounded corners idea and have square buttons, which are easy to do with CSS. CSS-based buttons will be easier for customizers of our apps to deal with if they want to localize the button text based on the browser locale.

Anyway, in my Web research on this problem I happened on this guy's blog article, which captures the life of a smart, under-achieving Web developer very well (and also has some discussion of the rounded corners issue): Rounded Corners/Drop Shadow deconstructed.

I started my interest in computers as a self-taught Web developer back in the late 1990's while I was still a student of Classics in college. But I didn't know I would be a computer programmer at the time. I got deeply into Web development personally, but never did much with it professionally, other than sample and test applications for books and work. I ended up getting more into server-side Java programming. This rounded corners problem has been an interesting diversion and a bit of a trip down memory lane.

0 Comments:

Post a Comment

<< Home