The true power of CSS

October 17, 2003 | View Comments (8) | Category: Our Thoughts

Summary: Gotta see it to believe it. A CSS house.

I don't usually post short things like this, but this was too hard to pass up. Look at the source code.

CSS 3D House

via Web-Graphics

Who knew that the W3C meant for CSS to be used as a CAD program?

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/30

Comments

#1

wow.
On the one hand... that's neat.

On the other hand... what an intensely stupid waste of time.

I know they're just trying to show off what CSS can do... but hey, I can hammer and pry out nails with a pair of pliers, but that doesn't make it the proper tool for the job.

What's this do? I don't believe I've ever seen this before...

* {
font-family:verdana;
font-size:12px;
line-height:14px;}

I'd guess maybe it sets the base attributes of the page?

JC (http://thelionsweb.com/weblog)

#2

That's brilliant. I don't think it's a waste of time at all - sure it isn't practically useful, but as a learning exercise and a demonstration of the power of the "slanted borders" technique it's great. I bet it was fun to make as well.

* is the CSS selector for matching ALL elements in a document.

Simon Willison (http://simon.incutio.com/)

#3

Some people just have way to much time. ;) That's a clever demonstration of the power of CSS.

Joshua Kaufman (http://unraveled.com)

#4

I just think it is amazing. I mean obviously there is no pratical use for this when you look at the big picture (or house), but just gaining some small insight into the power of borders could produce some interesting affects for our sites. Not that I would have the slightest idea of how to do it though.

Scrivs (http://www.9rules.com/whitespace/)

#5

Well, Paul... I've used border effects like that on occasion in web applications... usually as headings for tables, make them a little bit like buttons, and then give the table cells themselves a more subtle effect.. makes them easier to read. Mostly for our financial stuff, online banking and so on.

JC (http://thelionsweb.com/weblog)

#6

the funny thing is that a gif version is a little bigger than the file...
15,9 contra 15,4 Kb

sorry had to much time

marz

#7

well there's a rare thing. Sparred by Marz' comment above, I tried it as a gif and it is indeed 15.9... but as a png file it's 7.77.

I can almost never manage to make a png smaller than a gif... but this time it just was.

JC (http://www.thelionsweb.com/weblog)

#8

marz and JC: I would definitely say you two take the "Geeks of the Week" award :) Thanks for the useful info though.

Scrivs (http://www.9rules.com/whitespace/)

Keep track of comments to all entries with the Comments Feed