Slash Boxes
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

use Perl Log In

Log In

[ Create a new account ]

jjohn (22)

  (email not shown publicly)
AOL IM: taskboy3000 (Add Buddy, Send Message)

Perl hack/Linux buff/OSS junkie.

Journal of jjohn (22)

Tuesday August 24, 2004
11:30 AM

web design tips from Alton Brown

[ #20540 ]

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!

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
More | Login | Reply
Loading... please wait.