Post Archive
› October 17, 2003
A house made entirely of CSS?
Chris Hester has created a picture of a house using nothing more than CSS - no images.
Spotted by LiteraryMoose.
Comments
1. October 17, 2003 10:41 AM
2. October 17, 2003 11:31 AM
3. October 17, 2003 11:42 AM
Dave Lindquist Posted…
I've been a little AWOL from CSS design for many months now. I come back and all of a sudden they got 45 degree angles and such? How the heck do they do that?! Some one please explain. I can't grok the stylesheet right now (or too lazy).
4. October 17, 2003 11:49 AM
5. October 17, 2003 12:03 PM
Nate Posted…
DAVE! Where is your site? Where are your scripts? I've been looking for them, and I'm not the only one. We can host them here if there's something wrong with your server or hosting, let me know.
6. October 17, 2003 12:21 PM
liorean Posted…
The 45° is achieved through using wide borders (you get a diagonal from the corner of the padding box to the corner of the border box, and if the border-top/bottom and border-left/right is the same size, it creates a 45° angle in between. This angle is of course only seen if you use different colours on the different borders.)
This has been used before, the forerunners being Tantek with his hexagonal site map and his study of regular polygons and Eric Meyer with his Slantastic.
7. October 17, 2003 02:58 PM
8. October 17, 2003 03:34 PM
9. October 17, 2003 03:43 PM
liorean Posted…
I'm a bit disappointed in the over-use of ids, though. Aren't classes better for grouping many bricks?
10. October 17, 2003 03:48 PM
Nate Posted…
Well a lot of these "can it be done" type experiments aren't exactly paragons of semantical value. But given that they are about stretching the limits of the technology, and not about practical usage, it seems ok in my book.
11. October 17, 2003 04:28 PM
Russ Weakley Posted…
Liorean, I agree with your comment, but this falls into the category of "out-there experiements", so it seems a little harsh to comment on sementics. Like saying "it has some accessibility issues". I think it is great to see someone pushing the CSS envelope.
12. October 17, 2003 05:13 PM
liorean Posted…
Oh, I think you got me at least partially wrong. I wanted to point out that the author did a lot of extraneous work where he could have used classes for grouping. It's space consuming to give each brick an id and then use groups of ids where a class would have been much more efficient. (ie it's not done the way I'd done it)
13. October 18, 2003 05:19 PM
Chris Hester Posted…
The demo is not broken in Opera. It was tested in the latest version - 7.2. I can't vouch for older out-of-date browsers. I believe it is a mess in IE5/Win too. It works flawlessly in Mozilla 1.5, Opera 7.2 and IE6. Any Mac users tried it?
Liorean: "I’m a bit disappointed in the over-use of ids, though. Aren’t classes better for grouping many bricks?"
Classes are meant for identical styling of elements. I could not do this with the bricks as each one has a different position. So id was the proper solution to me.
14. October 18, 2003 08:10 PM
Big John Posted…
Yep, Op7.2 works fine. About those slanted borders, there's another site that carries the idea to extremes:
http://www.infimum.dk/DHTMLindex.html
It uses lots of JS, but only to control the CSS borders.
Flexer Posted…
Cool :)