Heinous Corner-Rounding of the Day Award (HCROD) #1: Powells Books (div per image)

My sister recently sent me an (online) gift certificate to Powells books. I just love those stores but had never been to the web site. It turns out that the site, like the stores, is exceptionally cool. You can browse for books and then print out a shopping list for your store visit. And there is all kinds of useful organization such as the technical section, and the Portland local section.

So what’s my first thought when encountering such a site (well maybe my second thought — right after “can I preorder my copy of Harry Potter #7“)? Why it’s: “let’s see what Firebug can tell us about the site’s construction” of course! Here’s what I found interesting in about three minutes:

  1. the site pretty much uses table-less layout — yippee! divs and floats my friends
  2. elastic layout
  3. font resizing works pretty well in content areas but not in navigation controls

Something I’m particularly interested in these days is that old chestnut of web design: the rounded corner. The approach on the Powells site was so, well, heinous, that it prompted me to inaugurate what I hope will become a regular feature here. Without further ado, I give you:

Heinous Corner-Rounding of the Day Award (HCROD) #1: Powells Books (div per image)

Got some content you’d like to render in a rounded box? Well then, simply wrap it in six divs — one each for: right, bottom, and each of the corners. That way you can hang CSS rules on each of those divs to apply your rounded/shadowed images. Semantic HTML my foot. Dig:

firefoxscreensnapz0322

About these ads
This entry was posted in CSS, design. Bookmark the permalink.

3 Responses to Heinous Corner-Rounding of the Day Award (HCROD) #1: Powells Books (div per image)

  1. Rodrigo says:

    LOL!

    And those shadows … man, can’t they be a little more subtle? :)

  2. Sonny Lacey says:

    keeee rist.
    And those look like 20px radii on ‘em!

    …you can tell they’re pre-Web2.0ish. Still with the default Photoshop 120-degree shadow falloff and not the hip, everywhere 90-degree…

  3. Bill says:

    Ah Sonny sees the game within the game.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s