CSS Wowsers

I understand that not everyone here knows what CSS is. If you don’t know what CSS is, this won’t be extremely impressive until you have a little more understanding. In short, CSS (short for Cascading Style Sheets) is a language that allows a web developer to tell the browser how their page should look, and it is much more powerful than HTML for describing page layout and stuff like that. Usually it works hand-in-hand with HTML. CSS allows you to create invisible boxes in your page inside which you can put content, like this text you’re reading right now. Those boxes help to give the page structure. And those boxes can have different background colors, or different kinds or borders and margin sizes and padding, and… you get the idea.

But that’s just the tip of the iceberg. Look what somebody made CSS do: 3D Border Demo 2 by Chris Hester

I don’t know who Chris Hester is, but he is certainly a master of CSS. There are no images on that page. There are no GIFs. There are no JPGs. If you know web source well enough, go ahead and take a peek. It’s incredibly impressive.

That house was made up entirely of little CSS boxes with different border shadings. My guess is that every single brick on that house is a separate CSS box, and they’re all aligned with each other down to the pixel. The window frame, the door, those are all separate boxes.

I should be clear that this was not at all what CSS was intended to do. Chris Hester must have sat for hours and hours in front of his computer trying to get that thing to work. And for that, he deserves our admiration. 🙂

9 Comments

  1. Neal
    Posted October 25, 2003 at 8:15 pm | Permalink

    Or our unadulterated scorn. It’s all a matter of perspective!

  2. Posted October 25, 2003 at 9:58 pm | Permalink

    His house isn’t too impressive on a PC w/ IE.

  3. Posted October 25, 2003 at 10:03 pm | Permalink

    That’s mostly because you’re using IE 5.5, whose standards support could be rewritten to say, “Support standards? I thought you said , ‘Support band nerds!'”

    Basically 5.5 is all messed up. You should go and get IE 6.0 right away, frankly.

  4. Posted October 26, 2003 at 12:21 pm | Permalink

    I’m working on a version that works in IE5/Win. Sorry about that. Still, works in six Mac browsers, IE6/Win, Mozilla 1.5 and Opera 7.2!

    “My guess is that every single brick on that house is a separate CSS box, and they’re all aligned with each other down to the pixel.”

    Correct. Though several people have suggested it would be better using classes not IDs. I don’t see this, as every brick has a different position.

    For the record, there are 101 bricks. Positioning them wasn’t that hard – I could just copy the rows and adjust the top position value. That is, after allowing for half-bricks and long-sized bricks!

  5. Neal
    Posted October 26, 2003 at 12:38 pm | Permalink

    Sheesh, I didn’t make a joking comment like that expecting to have the webpage owner see it. I must not forget the power of pinging!

  6. Posted October 27, 2003 at 9:21 am | Permalink

    Josh, that’s kinda cool that Chris Hester ponged your ping.

  7. Posted October 27, 2003 at 10:21 am | Permalink

    Yeah, isn’t it? I guess that’s kind of a “Welcome to the Internet” thing, where whoever you’re writing about could eventually come write about or respond to you! It adds an interesting dynamic.

  8. Posted October 27, 2003 at 11:23 am | Permalink

    And it supports the impression the guy has far too much time on his hands.

  9. Posted November 18, 2003 at 10:21 pm | Permalink

    Ah, yes, time. If only we all had more time! We want it so bad, yet look what it does to us!

    CSS is amazing, indeed. I thought tables were where “it was at” as far as page layout was concerned until CSS shined its glorious light on my life. You know you’ve found a technology that you love when you find yourself referring to it as “sexy.”