Alton Brown is a mad scientist. Watch his cooking show on the Food Network for more than five minutes and you will reach the same conclusion. While mad scientists typically tamper with chthonic forces of nature to remake life in their own mad vision, Brown’s material of choice is food. His vision is the same though.
This post isn’t about how entertaining AB is (he is) or how effective his teaching style is (very) or even about the tastiness of his recipes (intensely). Instead, I want to share with you what I learned about web design from Brown’s web site. But first, more about me.
I have little graphic talent. That is I can’t draw very well, nor can I select a pleasant pallet colors. I can’t sketch well, paint well or sculpt well. I just don’t think that part of my brain works or perhaps it’s just very sleepy. While I understand how to use graphic manipulation programs like Gimp, I can do very little with them because, as I’ve mentioned, I have no talent.
Most of the time, it’s not a problem that I don’t have graphic talent because that’s not my job. However, there are times when I get frustrated by this hole in my skills. In particular there are common graphic motifs that are ubiquitous on the web that I can’t reproduce for the life of me. One of those elements litters Brown’s web site: the curved box. What I’m talking about is those lime-green containers that define the sections of text. Each corner of those boxes of texts is curved. I have long known that this effect is achieved with small graphic files, but in my own experiments I was unable to create the rather oblique curves needed in my graphic application.
And so, I despaired…until today.
As I was looking enviously at Brown’s site, I decided to examine one of the corner graphics apart from the page on which it sits. To my surprise, it had very different dimensions than what the HTML source showed. Moreover, the graphic was a simple quarter of a circle! Circles, I can make!
Putting it all together, the recipe for creating those curved corners is the following:
- Fire up your graphics package
- Create a new graphic 40 x 40 pixels (for instance)
- Fill the background with the desired background color of your site. (or leave transparent)
- Pick a forground for the circle that you’re about to draw
- Inscribe a circle so that radius extends to the edges of the graphic
- Save
- quarter the circle so that you have four 20 x 20 squares. Each square will have an arc in it.
- Save each quarter to a separate file
The magic now comes when you reference these graphics in HTML. Simply augment the width or height parameter of the IMG tag to achieve a fancy sweeping arc. Turn the graphic into a rectangle and the browser will make the arc for you.
When your boss gives you a raise for your amazing web design savvy, tell ‘em Joe sent ya!