Useful Info
EMAIL: www.designdetector.com (Replace the 1st dot with "@".)
RSS 2.0 NEWSFEED: Subscribe to news of fresh posts and site updates.
Follow me on these sites:
500px deviantART Flickr Facebook SoundCloud Twitter
Disclaimer
Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of them.
All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of my code from this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for it working on other computer systems, or following changes you make yourself to the code.
This website is © Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except for content added from separate authors (who retain the copyright on their material), examples of code, and any other content I state is free to copy and make use of.
Comments (96)
Comments are locked on this topic. Thanks to everyone who posted a comment.
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 ¶
Wonderful!
Posted on 17th October 2003 at 7:43 am ¶
Absolutely Amazing =)
Posted on 17th October 2003 at 1:31 pm ¶
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 ¶
Insane. Greatly insane.
Posted on 17th October 2003 at 10:37 pm ¶
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 ¶
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!!
Posted on 18th October 2003 at 3:26 am ¶
whoa! what a nice house, getting me back to my c64 era
Posted on 18th October 2003 at 11:02 pm ¶
I am extremely jealous.
Posted on 19th October 2003 at 12:57 am ¶
Yes, reminds me of ANSIdraw back in the DOS and 1200 bps days.
Posted on 19th October 2003 at 8:25 pm ¶
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 ¶
Fantastico è dire poco... complimenti !!!
Posted on 19th October 2003 at 8:27 pm ¶
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 ¶
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 ¶
Good work!
Posted on 19th October 2003 at 8:31 pm ¶
Man, that's awesome! Great job.
Posted on 19th October 2003 at 8:32 pm ¶
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 ¶
Ummm... I think you should add a :hover for the door handle.
Posted on 19th October 2003 at 8:48 pm ¶
You have WAY to much free time
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 ¶
how can something that simple and ugly be so impressive. nice work!
Posted on 19th October 2003 at 9:34 pm ¶
"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 ¶
Extera!!!!!!!
Posted on 20th October 2003 at 5:03 am ¶
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 ¶
Posted on 20th October 2003 at 11:39 am ¶
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 ¶
Lol, How sad!
Posted on 20th October 2003 at 11:48 am ¶
nice, do you have done a SVG version?
Posted on 20th October 2003 at 1:02 pm ¶
That's nothing against my novels and websites I write with Photoshop
Posted on 20th October 2003 at 1:33 pm ¶
Incredible!!! I've never seen anything like it
Posted on 20th October 2003 at 2:36 pm ¶
why do people always do things in a difficult way although it can be done simply?
Posted on 20th October 2003 at 4:54 pm ¶
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 ¶
Simple and elegant coding. I like it.
Posted on 21st October 2003 at 2:00 pm ¶
My hats of to you
Posted on 21st October 2003 at 2:20 pm ¶
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 ¶
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 ¶
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 ¶
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 ¶
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 ¶
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 ¶
I'm sure there's a point to it somewhere. Damn impressive, nonetheless.
Posted on 22nd October 2003 at 6:53 pm ¶
"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 ¶
Incredible!
Posted on 22nd October 2003 at 8:25 pm ¶
Amazing what can be done with CSS!
Awesome work.
Posted on 23rd October 2003 at 2:25 am ¶
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 ¶
Someone around here has too much time on his hands!
Nice work
Posted on 23rd October 2003 at 10:55 am ¶
Gay
Posted on 23rd October 2003 at 10:56 am ¶
You should name this wonder "The House that CSS built"
Posted on 23rd October 2003 at 11:12 am ¶
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 ¶
What enormous waste of time. You fool, go outdoor and get a job!
Posted on 23rd October 2003 at 9:02 pm ¶
This is pretty awesome stuff no doubt...
Posted on 25th October 2003 at 5:36 am ¶
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 ¶
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 ¶
Very Cool!
Posted on 26th October 2003 at 1:31 pm ¶
too cool! i can't wait for the basement!
Posted on 27th October 2003 at 9:48 am ¶
lets build an html city
Posted on 27th October 2003 at 3:51 pm ¶
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 ¶
Very insane!
Posted on 29th October 2003 at 11:56 am ¶
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 ¶
:o
Posted on 29th October 2003 at 9:37 pm ¶
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 ¶
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 ¶
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 ¶
Why?
Posted on 3rd November 2003 at 11:03 pm ¶
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 ¶
Interesting))) I'll download it)) just amazing!
Posted on 5th November 2003 at 7:13 am ¶
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 ¶
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 ¶
A CSS lamp...
http://www.mraveniste.org/weblog/css-lampa/
...inspired by my house!
Posted on 6th November 2003 at 7:47 pm ¶
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 ¶
I am in AWE!
YOU ARE A GOD OF CSS!
Posted on 14th November 2003 at 1:28 am ¶
Dang. You are an inspiration to CSS experimenters everywhere. Hats off!
Posted on 16th November 2003 at 7:19 pm ¶
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 ¶
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 ¶
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 ¶
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 ¶
ql !
Posted on 26th December 2003 at 1:13 pm ¶
CHO ZA HUINYA???
Obyasnite tupomu!
Posted on 28th December 2003 at 4:53 pm ¶
ugly
Posted on 29th December 2003 at 5:22 pm ¶
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 ¶
to start building this house anywhere on a page... to not hard code the bricks...
Posted on 15th January 2004 at 7:57 pm ¶
Looking forward to the CSS real-estate project
Posted on 28th January 2004 at 8:05 pm ¶
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 ¶
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 ¶
Absoluteley SUPERB !
Posted on 20th February 2004 at 10:22 pm ¶
wow, great demo man. keep up the good work!
Posted on 11th March 2004 at 12:17 am ¶
It's cool!
Posted on 13th March 2004 at 6:39 am ¶
Putz! Caramba, nunca pensei que CSS era tão poderoso!
parabéns pra galera que teve a coragem de fazer esta casa.
Posted on 13th April 2004 at 1:17 am ¶
it's cool
Posted on 24th April 2004 at 8:01 pm ¶
BIG DEAL!
Posted on 3rd May 2004 at 6:38 pm ¶
Stellar performance!!!
Posted on 27th May 2004 at 11:09 pm ¶
very very good
Posted on 19th September 2004 at 6:00 pm ¶
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 ¶
To coin a phrase "whoa!"
Posted on 13th October 2004 at 11:39 am ¶
Wow!
Posted on 14th October 2004 at 11:46 pm ¶
ITS NOT CSS VALID BIATCH
Posted on 22nd October 2004 at 12:48 pm ¶
What? The only error was writing '<style>' instead of '<style type="text/css">'. Ooooh.
Posted on 22nd October 2004 at 9:09 pm ¶