3D Border Demo 2

16th October 2003 · Last updated: 5th October 2016
 

Comments


If you liked my recent 3D Border Demo then take a look at my new improved version. I've created a picture of a house using nothing more than stylesheets and borders. Absolutely no images.

Comments (96)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Jason Estes:
    Absolutely fantastic, it's all over the CSS-D list and everyone is raving. It's a stellar showing for CSS and the power of it. Thanks for the great demo, I'm sure you will get alot of praise for it.

    The Bewb

    Posted on 17th October 2003 at 5:34 am
  2. Carsten:
    Wonderful!

    Posted on 17th October 2003 at 7:43 am
  3. afrael:
    Absolutely Amazing =)

    Posted on 17th October 2003 at 1:31 pm
  4. Claire:
    Well Chris what can I say - this is
    **absolutely superb!!**
    and will feature on sites far and wide I bet ;-)

    Posted on 17th October 2003 at 5:23 pm
  5. beto:
    Insane. Greatly insane. :-D

    Posted on 17th October 2003 at 10:37 pm
  6. MikeyC:
    Who needs native SVG support when you can create such brilliant stuff using only CSS ;-)

    Great stuff!

    Posted on 17th October 2003 at 11:43 pm
  7. manuel razzari:
    A huge hit at css-d indeed, and I agree with MikeyC, will there ever be a tool to create such stuff... We used to do this with tables, parse an image px by px and create TDs with the color... some made it by hand and made contests... absolutely demented... this css house has historical significance!! ;-) best, - manuel

    Posted on 18th October 2003 at 3:26 am
  8. eye2lk:
    whoa! what a nice house, getting me back to my c64 era :-) grat

    Posted on 18th October 2003 at 11:02 pm
  9. Big John:
    I am extremely jealous.

    Posted on 19th October 2003 at 12:57 am
  10. sun818:
    Yes, reminds me of ANSIdraw back in the DOS and 1200 bps days.

    Posted on 19th October 2003 at 8:25 pm
  11. bruce:
    errm... aren't you guys getting a little bit carried away?

    Sure, it's an impressively painstaking use of CSS, but this is NOT what CSS is designed for. So you're happy with the fact that we've come this far only to be stuck with C64 level graphics?

    I hate to be a party pooper, this is imrpessive work on one level, but it's not pushing web design any further into the future.

    Posted on 19th October 2003 at 8:27 pm
  12. Mauro:
    Fantastico è dire poco... complimenti !!!

    Posted on 19th October 2003 at 8:27 pm
  13. Leedar:
    I've been thinking of doing some <div> art like this for a while... you may have reinspired me, thanks!

    Posted on 19th October 2003 at 8:28 pm
  14. Ian Turner:
    Incredible work - I'm really confused as to how the diagonal borders on the roof were created.

    Posted on 19th October 2003 at 8:30 pm
  15. Mitra:
    Good work! ;-)

    Posted on 19th October 2003 at 8:31 pm
  16. rick:
    Man, that's awesome! Great job.

    Posted on 19th October 2003 at 8:32 pm
  17. Elisabeth:
    This is an amazing piece of work! I've been working to learn more about CSS and you've given me serious inspiration. I've shared it with several others.

    Posted on 19th October 2003 at 8:48 pm
  18. Toby Inkster:
    Ummm... I think you should add a :hover for the door handle. :-D

    Posted on 19th October 2003 at 8:48 pm
  19. Duende:
    You have WAY to much free time :-D

    btw what are you using for this comments thingy?

    Oh yah, very impressive exercise in css.

    Posted on 19th October 2003 at 8:50 pm
  20. Anonymous:
    how can something that simple and ugly be so impressive. nice work!

    Posted on 19th October 2003 at 9:34 pm
  21. Chris Hester:
    "btw what are you using for this comments thingy?"

    It's a free PHP script I've customised. Yeah I know, no codes for italic and bold, no auto-linking URLs. I need to fix that. (I did try but there were too many bugs.)

    Posted on 19th October 2003 at 9:46 pm
  22. baba_leng_deraz:
    Extera!!!!!!! :-)

    Posted on 20th October 2003 at 5:03 am
  23. hollow:
    Patient and insane work, well done.
    Reckon that you should consider classes for the brick colours and borders, rather than a list of id's.

    Posted on 20th October 2003 at 9:06 am
  24. Anonymous:
    :-D :-) :-O ;-)

    Posted on 20th October 2003 at 11:39 am
  25. Gary:
    Another example of how pointless CSS really can be... 22 pages??? Is there a point, why not just do it in paint???

    Posted on 20th October 2003 at 11:44 am
  26. John:
    Lol, How sad!

    Posted on 20th October 2003 at 11:48 am
  27. Cedric:
    nice, do you have done a SVG version? ;-)

    Posted on 20th October 2003 at 1:02 pm
  28. Rene:
    That's nothing against my novels and websites I write with Photoshop ;-)

    Posted on 20th October 2003 at 1:33 pm
  29. Rob:
    Incredible!!! I've never seen anything like it :-D

    Posted on 20th October 2003 at 2:36 pm
  30. slave:
    why do people always do things in a difficult way although it can be done simply? :-D

    Posted on 20th October 2003 at 4:54 pm
  31. Vecko:
    Very amazing, maybe the next thing we'll see is a graphic site with no images :-)

    Posted on 20th October 2003 at 9:06 pm
  32. Oliver Tseng:
    Simple and elegant coding. I like it.

    Posted on 21st October 2003 at 2:00 pm
  33. afrael:
    My hats of to you :-)

    Posted on 21st October 2003 at 2:20 pm
  34. Ephraim F. Moya:
    So what!

    Yes, a good mason can build many different kinds of building. What counts is the building, not the bricks.

    I say this because this design fails instantly if you want a potted plant on one side of the door.

    What a waste of time and intellect.

    Posted on 21st October 2003 at 8:07 pm
  35. Chris Hester:
    The object of the exercise was not to make a perfect building. It was to see how far I could take CSS.

    I know enough now to put a potted plant anywhere you want it. I have broken through to the stage where my next demo will allow ANYTHING to be achieved.

    "What a waste of time and intellect."

    Thankfully your opinion is a minority one. To be honest I just did it over a few days for my own amusement. If people like it, that's fine. If they don't, that is not a problem. But I would disagree that it was a waste of time and intellect. Many people have found it inspiring, the people who will go on to take CSS to the next level.

    You don't have to make a full picture. Image-based menus (including rollovers) have already been replaced by CSS-only ones. It saves code, downloads instantly, is more accessible, enough said.

    I'm sorry you didn't like my demo.

    Posted on 21st October 2003 at 8:43 pm
  36. Paul Colombo:
    A fun little excersize to test your CSS skills, for sure. But utterly useless. 49 kb?!

    Posted on 21st October 2003 at 10:20 pm
  37. mho:
    It's nice to see, that people use sparetime - just to let other people know the magic around css. Cause it's magic, pure magic :-)

    Good luck in the future, Hester.

    Posted on 22nd October 2003 at 11:27 am
  38. dj Padák:
    I cannot beleive my exes! It is really CSS. We have linked this website on the Czech discussion servers.

    Posted on 22nd October 2003 at 12:45 pm
  39. Tina:
    Great work.
    I hope, you´ll built a garden around, too. ;-)
    I found the link to your site in the current newsletter from the german webdesign-magazine www.drweb.de.

    Posted on 22nd October 2003 at 5:24 pm
  40. Keith:
    I'm sure there's a point to it somewhere. Damn impressive, nonetheless.

    Posted on 22nd October 2003 at 6:53 pm
  41. Chris Hester:
    "A fun little excersize to test your CSS skills, for sure. But utterly useless. 49 kb?!"

    I'm not saying it is useful. Just a demo, an experiment.

    49Kb?? I get 15Kb. I have done a new version which strips an extra 1Kb off the code. Now how big would an image that size take up eh? :-)

    Posted on 22nd October 2003 at 7:45 pm
  42. Greg:
    Incredible! :-O I didn't know such things were possible with CSS!

    Posted on 22nd October 2003 at 8:25 pm
  43. Jeff:
    Amazing what can be done with CSS!
    Awesome work. :-)

    Posted on 23rd October 2003 at 2:25 am
  44. aaron wall:
    I am not good at CSS because I cannot well see the effects...I am a trial and error sort of person. I think even if I knew exactly what I was doing ...that would be way beyond anything I could ever do

    awesome

    Posted on 23rd October 2003 at 10:12 am
  45. Carl:
    Someone around here has too much time on his hands!

    Nice work ;-)

    Posted on 23rd October 2003 at 10:55 am
  46. Carl:
    Gay

    Posted on 23rd October 2003 at 10:56 am
  47. Neil:
    You should name this wonder "The House that CSS built" :-D

    Posted on 23rd October 2003 at 11:12 am
  48. John:
    Speaking of DIV art - check this one out: the author says it works best in Mozilla 1.3+, but it works ok for me in other browsers.

    CSS/JS Paint:
    http://slayeroffice.com/tools/web_paint/

    Posted on 23rd October 2003 at 5:28 pm
  49. cris:
    What enormous waste of time. You fool, go outdoor and get a job!

    Posted on 23rd October 2003 at 9:02 pm
  50. Sushubh:
    This is pretty awesome stuff no doubt...

    Posted on 25th October 2003 at 5:36 am
  51. michael:
    Really good stuff that shows the power of CSS but, on it's own, has no practical application. Doesn't mean it isn't damn cool, though.

    Posted on 25th October 2003 at 3:20 pm
  52. Michael Merritt:
    Some people here need to grow up a little. True that this thing may not be particularly useful, but that doesn't mean it was a waste of time or is stupid. I think it shows the power of CSS, and give a reason why it should be used to make a website look so much better, even if not to the extent of this design.

    Posted on 26th October 2003 at 6:55 am
  53. John:
    Very Cool!

    Posted on 26th October 2003 at 1:31 pm
  54. thomas:
    too cool! i can't wait for the basement! :-D

    Posted on 27th October 2003 at 9:48 am
  55. vizir:
    lets build an html city

    Posted on 27th October 2003 at 3:51 pm
  56. Mike:
    Some of you people are missing the point. This is an EXPERIMENT. It's not done to further the cause of "presentation & logic separation" or "tableless/semantic markup" or anything like that. It's ART.

    To be fair, art is in the eye of the beholder. When Superbad created his chaotic site, it wasn't to champion web site usability. When Kottke and other similar web artists began using pixel-precise graphics, it wasn't to champion accessible web graphics. It was all for the sake of experimentation and art.

    They received a lot of harsh words too, from critics who simply didn't understand what their intentions were.

    This design is clever. It's a clever tongue-in-cheek use of CSS. Most of the critics here would have never thought to use border styles to make a roof. So don't be jealous, just enjoy this effort.

    And maybe it's a testament to the cleverness of this experiment that it's invited as much criticism as it has acclaim.

    Good job man!

    Posted on 28th October 2003 at 2:47 am
  57. Shellm:
    Very insane!

    Posted on 29th October 2003 at 11:56 am
  58. Me:
    Wow, I'm really impressed. Nice job.

    Is it a waste of time? No. It's things like this that give you and possibly others great ideas and expertise on the subject. So what if it's not "useful", it can lead to other useful things.

    Posted on 29th October 2003 at 7:43 pm
  59. :o:
    :o

    Posted on 29th October 2003 at 9:37 pm
  60. Anne:
    On my screen res (800x600) it's all messed up - nothing's where it should be
    :-(

    Posted on 2nd November 2003 at 4:11 pm
  61. Chris Hester:
    You must be using IE5 on Windows. The demo was designed to fit nicely on the screen at 800 x 600.

    I'm redoing it to make it work in IE5 but since I have IE6 on this PC it's a long process while someone else tests it out. I'm nearly there so hang on folks!

    Posted on 2nd November 2003 at 7:03 pm
  62. Chris Hester:
    Demo now works in IE5! Any problems let me know!

    Thanks to Big John for his patience in testing this.

    I've also improved the code, making it shorter and more efficient.

    Posted on 3rd November 2003 at 7:20 pm
  63. -:
    Why?

    Posted on 3rd November 2003 at 11:03 pm
  64. Big John:
    Why? WHY? Why not?

    CSS was never meant to create graphics, so that fact that it can is most intriguing. It is a testament to the theory wonks at the W3C. They aimed for flexibility, and BOY, did they get it right!

    Posted on 4th November 2003 at 5:44 am
  65. Anonymous:
    Interesting))) I'll download it)) just amazing!

    Posted on 5th November 2003 at 7:13 am
  66. Cody P Skidmore:
    Don't know if anyone noticed but the image doesn't seem to display correcty in IE. The roof is squashed down into the house. I can send you a screenshot if you cannot duplicate it along with the version and service pack info on IE.

    Posted on 5th November 2003 at 4:10 pm
  67. Chris Hester:
    Blimey! You're right! I can't win. There are now two versions available. One for capable browsers, and one for Internet Explorer 5 on Windows.

    I thought only one version would work for all browsers, clearly not. This needs looking into. Thanks Cody for pointing it out.

    Posted on 5th November 2003 at 7:55 pm
  68. Chris Hester:
    A CSS lamp...

    http://www.mraveniste.org/weblog/css-lampa/

    ...inspired by my house!

    Posted on 6th November 2003 at 7:47 pm
  69. Chris Hester:
    With help (again from Big John - thanks) I should now have a version that works in both IE5 and IE6. Try it.

    Posted on 6th November 2003 at 8:11 pm
  70. Elliott Rodgers:
    I am in AWE!

    YOU ARE A GOD OF CSS!

    Posted on 14th November 2003 at 1:28 am
  71. Jen W:
    Dang. You are an inspiration to CSS experimenters everywhere. Hats off!

    Posted on 16th November 2003 at 7:19 pm
  72. Stu Nicholls:
    Very nicely done.
    I am a great fan of css and have my own methods of using it.
    http://stunicholls.myby.co.uk/book/

    Posted on 19th November 2003 at 1:46 pm
  73. Eliza:
    Its terrific!. Some people are a little too judgemental on how others choose to spend their time, personally I think you spend your time very well indeed *g*

    Nice job. Very inspiring, especially when so many designers still witter on about the limits css has.

    Posted on 20th November 2003 at 5:07 pm
  74. Darren Brothers:
    Great work.
    Is there any way to animate it (make the door open onmouseover, or the windows, or make smoke come out the chimneys)?

    This type of extreme experimentation with CSS tests the boundaries of what is possible. That's why it will never be a waste of time... because someone else will take the concept of what you've done, and run with it, making something even better... and possibly even something useful for all of us.

    Posted on 25th November 2003 at 5:50 pm
  75. peter:
    This is an amazing use of css. I realize some are concerned about your use of time on a "frivolous" project. I strongly disagree with their viewpoint.
    In the process of redoing our website...outdated table oriented. While I will not build a house on the site, your use of css has inspired me to experiment a little more before I make the changes to our website.
    Good luck on all of your endeavors and please keep expanding the capabilities of CSS.

    Posted on 13th December 2003 at 9:15 pm
  76. tiga nix:
    ql !

    Posted on 26th December 2003 at 1:13 pm
  77. AAA:
    CHO ZA HUINYA???
    Obyasnite tupomu!

    Posted on 28th December 2003 at 4:53 pm
  78. someone:
    ugly

    Posted on 29th December 2003 at 5:22 pm
  79. Rob - France:
    I'm all in favour of frivolous stuff like this taking place! There is too much "money money money" stuff going on in the internet already. Well done!

    Posted on 5th January 2004 at 3:01 pm
  80. joestone:
    to start building this house anywhere on a page... to not hard code the bricks...

    Posted on 15th January 2004 at 7:57 pm
  81. toolkit:
    Looking forward to the CSS real-estate project ;-)

    Posted on 28th January 2004 at 8:05 pm
  82. Chris A Hester:
    Wow, my namesake is a genius. Chris, I don't know what CSS is but you are obviously 'the man' judging by nearly all these comments.

    Posted on 11th February 2004 at 3:00 am
  83. Nigel:
    even though 4 months since the update- this destroys anything else I have seen. Nice. ;-)
    this opens up doors I didn't know existed.

    Posted on 12th February 2004 at 6:03 am
  84. Soska:
    Absoluteley SUPERB !

    Posted on 20th February 2004 at 10:22 pm
  85. professional search engine marketing guy:
    wow, great demo man. keep up the good work!

    Posted on 11th March 2004 at 12:17 am
  86. Sergey:
    It's cool!

    Posted on 13th March 2004 at 6:39 am
  87. Assunção Jr.:
    Putz! Caramba, nunca pensei que CSS era tão poderoso!

    parabéns pra galera que teve a coragem de fazer esta casa. :-D

    Posted on 13th April 2004 at 1:17 am
  88. yuval:
    it's cool ;-) Great!

    Posted on 24th April 2004 at 8:01 pm
  89. Jesse Johnson:
    BIG DEAL!

    Posted on 3rd May 2004 at 6:38 pm
  90. Dan Finkle:
    Stellar performance!!! :-D

    Posted on 27th May 2004 at 11:09 pm
  91. Farhad:
    :-O
    very very good

    Posted on 19th September 2004 at 6:00 pm
  92. Matt:
    great inspiration for us diehard CSS eXperts.. You really push the envelope. Now experiment with CSS opacity levels and clipping, you may be able to get more exotic effects..

    Chill!

    ~ Matt

    Posted on 24th September 2004 at 2:42 am
  93. Michael:
    To coin a phrase "whoa!"

    Posted on 13th October 2004 at 11:39 am
  94. Anonymous:
    Wow!

    Posted on 14th October 2004 at 11:46 pm
  95. sdfbdksf:
    ITS NOT CSS VALID BIATCH

    Posted on 22nd October 2004 at 12:48 pm
  96. Chris Hester:
    What? The only error was writing '<style>' instead of '<style type="text/css">'. Ooooh. :-O I've changed it and validated purely the CSS used. Guess what - no errors found. :-D

    Posted on 22nd October 2004 at 9:09 pm