CSS House 2

20th October 2005 · Last updated: 9th December 2011
 

Comments


I can now reveal where I was heading with my previous CSS Gradients demos. I imagined a simple house shaded using these gradients. Of course when I finished, the house was a lot more detailed than I had imagined. I used PHP to generate the divs and the CSS, which allowed me to create a function to generate a gradient box anywhere on screen. It was then a matter of calling this function again and again to build up the picture. Each time I was able to define the positioning and colours of the gradients. To top it off I added a second function to create a sloped gradient.

So here is the demo:

CSS House 2

If you want to study the PHP and CSS used, here it is in text form:

CSS House 2 PHP (Text File)

I hope people like it as much as my previous CSS House demo. If I get half the worldwide interest that generated, I'll be more than happy.

Browser Support

Tested on Windows XP SP2.

  • Opera 8.50 - perfect
  • Firefox 1.07 - perfect
  • Internet Explorer 6, 7 - perfect

Let me know if it works in any other browsers! Here's a screenshot to show how it should look.

Updates

24th October 2005:
Added a screenshot so you can tell if your browser isn't displaying it properly.
22nd October 2005:
Improved the speed of the demo by caching the PHP as a static HTML file. Also removed some redundant spacing. The file would be 28Kb smaller if it weren't for the comments required inside each div, purely there to make IE6 play ball. The demo currently stands at 212Kb, using over 3,595 divs!

Comments (8)

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

  1. Dylan:
    Well that's quite the elaborate image you've got there. All of those divs take quite a while to display in my browser (creating an interesting top-down incremental loading effect for each block of divs, and thus showing the source order of each house component) but they certainly create a pretty nice image in the end. I see you've replaced the class system you had been using with an inline style attribute, which makes sense and reduces some of the code bloat.

    There seem to be some problems though, as the windows and door don't quite look right (the interior areas I assume are supposed to be the interior of the house but this isn't apparent and the window and door frames aren't very clear) and your gratuitous use of gradients doesn't seem to be necessary in some places (although you've probably just done this for illustrative purposes). The house seems like it could use some depth in places as well.

    Overall, your use of the CSS Gradients in a real world situation has been pulled off quite nicely, unfortunately the file size is rather large at ~200kb and therefore this isn't really a practical solution. But as an interesting proof-of-concept, I like it.

    Posted on 20 October 2005 at 11:54 pm
  2. Matthew Pettitt:
    Broken in Konqueror (predictably, although the gradient itself works. The doors and windows get lost though)
    Works in Firefox Beta 2, although it took a bit longer to render than in 1.0.7 for some reason.
    Perfect in Opera 8.5

    All of these running under a KDE desktop on Ubuntu 5.10 (Breezy)

    Posted on 20 October 2005 at 11:57 pm
  3. Kristofer:
    Awesome. Just awesome!

    FYI...

    Win 2K
    Mozilla 1.7.12 - perfect
    Firefox 1.5 (beta 2) - perfect
    Internet Explorer 6 - perfect

    Posted on 21 October 2005 at 1:38 am
  4. Roger Karlsson:
    Really cool! Works great in my Firefox 1.0.7.

    Posted on 22 October 2005 at 7:21 am
  5. Scott McCulloch:
    Mac OS X
    Safari 2.0.1

    Looks great!

    Posted on 22 October 2005 at 9:21 pm
  6. Krasimir:
    LINUX Mandriva 2005 LE(KDE 3.3.2)
    - Mozilla Firefox 1.0.7 - Perfect!
    - Opera 8.5 - Perfect!
    - Konqueror 3.3.2 - Perfect!

    Incredible!

    Posted on 23 October 2005 at 3:04 pm
  7. AHMED ELSHENAWY:
    I NEED YOUR LOVELY DESIGN

    Posted on 16 November 2005 at 5:27 pm
  8. Dave:
    Impressive.

    Utterly ridiculous, but impressive nonetheless. A great tool to show the CSS nay-sayers at my work. ("Wouldn't it be easier to make stuff line up if we just put it in a table?")

    Impressive like a guy who builds an entire (real) house out of old bottle-caps or something. Kind of crazy, not the sort of thing that I would necessarily do, but darned impressive.

    I like the fact that the chimney is attached to ... nothing.

    Posted on 27 January 2006 at 11:23 pm