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 thoughts on “CSS Wowsers

  1. 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.

  2. 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!

  3. 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!

  4. 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.

  5. 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.”

Leave a Reply

Your email address will not be published. Required fields are marked *