Search the Zooiblog

Follow the discussion below and participate.

Support this site.

Contest: Pushing CSS

Update: The pretty swell people of Color Schemer will be giving away their application (Windows or Mac OS X) to the number one. I’d say that’s worth giving it a shot, even if you already tried, like eight times or something (ey Trev?).

Okay, I’ve been working on this for a while, but here it is: my first contest for you and for the audience too. I wrote a simple HTML document with structural markup and some other stuff that makes sense. I present to you the markup: try and make something cool with CSS.


Because I think we all need challenges every now and then. Also, I guess there could be quite a lot to learn here.


Your tool? Just the CSS.

The idea I have is this: make the page easy to read, well-styled, efficient and reproducable. It’s up to you if you use graphics or not, if you use boxes or not. Just make it Good. Some rules do apply, and they make this the challenge it is: use a maximum of three images (read that correctly, please: three image files), make it work in modern web browsers (IE6 support would be nice, but it’s not a requirement) and go wild on the CSS3 you know. The funkier the better.

What’s in it for me?

Right now, that’s a small issue. I can only promise you fame and glory. If there’s anyone kind enough to give the winner(s) something, I’d be very happy. Contact me please. Mister winner will be receiving the swell Color Schemer app.

Okay, count me in

You can enter your submissions in the comments, but it’s okay if you mail me the link. Files will reside on your own server, but the best three will be hosted on my server.

What will happen to your design? It will end up in a list, with your name, website and maybe email. I’ll add a CC license to it as well. Of course, you may still do with your design whatever you want — tell me, so I can link to your specific CC or individual page.

Also, I’d like to inform the winner and numbers two and three that I’d love them to write a small bit about what CSS they used, and what stuff was really challenging. Just for the educational factor, I guess.

The jury

I found some people on the intarweb who I think are le cool and who were willing to be the jury on this contest. This jury consists of father and web developer John Oxton, great woman and minimalist designster Jina Bolton and kinky Kansas designer Jeff Croft. Impress them!

Well, let’s do this then!

The file is over here. Usage: /?file=http://youraddress.tld/style.css. There’s no deadline yet, but I give you at least one week. If that proves difficult, for whatever reason, I will make sure there’s enough time.

I added some markup to give just a couple more styling options and hooks, and to make it more realistic. Mister Dante will want to edit his submission. Sorry!


  1. Fun concept, perhaps if I have a bunch of spare time (HA!) I’ll make one :)

  2. Oh boy, my Live Edit favelet and the CSS Edit extension are gonna come in handy!

    I don’t use images though, (if I do, rarely). And I still have a Zen Garden entry gathering dust in my athenaeum or somewhere on my local server. Thanks for reminding me.

  3. Well, I guess I’ll enter... it seems to be just time to interrupt my 6 weeks long vacation.

  4. Hey, come to think of it, wasn’t IE7 Beta supposed to be released by now?

    My entry is here.

    I think it looks pretty damn good for a pre-dinner hack, no?

  5. Why not?
    The capacity of human beings to bore one another seems to be vastly greater than that of any other animal.
    H. L. Mencken (1880 - 1956)

  6. Rob’s mini zen Garden!

    I might be able to come up with something. It all depends if I have time.

  7. The XHTML is a bit small... too few elements, but OK!
    I never got a chance to do an entry for the Garden so if you keep this up enough time I’ll certainly send something.

  8. Gabriel, think about it: it’s a challenge :D

    Dante, that’s indeed quite nice for a quick hack. I see you took some TLC for my favourite browser (hint: text-shadow).

  9. Here’s my lame attempt... Image-free because I’m too lazy ;-)


    I’ll decorate it with some images as soon as I can find something nice. Maybe some bevels.

  10. Give me till wednesday and i’ll give it a go!

  11. I’ll give it a shot in a little bit, maybe tomorrow.

  12. I’m having a go and finding the really long navigation text bloody irritating >.<

  13. Ah, I shall revise my CSS slightly! I’m going to see someone very famous today (the guy who’s taking over the Pope’s old job), and I will be at the doctors tomorrow, so it looks like late-night hacking again...

    I had a feeling you’d be adding links to the body text. A “Caveat Lector” message would’ve been nice, stating that the CSS could change at any time...

    Rob, Hang on to your socks. They are about to be blown off!...maybe.

  14. http://zooibaai.nl/sandbox/contests/2005/pushing/?file=http://dreams.redial.net/mentaljuice.css

    My somewhat pitiful entry, I really hate the long navigation text, can’t do nice upside down tabs with them :)

  15. I’ve adapted a bunch of CSS that I’m currently using, to put this together:


  16. Looking forward to the results :)

  17. OK, here’s my (first) attempt at this little “contest”... if it’s a contest, what does the winner get? heh. It’d be good if you added an empty span in the h1 so I could use the gilder/levin image replacement technique, so you get text if images are turned off and styles sheets are enabled.


  18. Nice stuff, Trovster! :)

    Yay for tricky workarounds on the 3-image limit :-)

  19. hehe, gotta say thats some nifty worakround on that image limit :)

    Good stuff.

  20. Thanks Faruk and SteveC OK. How about another one?


    No tricks nor workarounds on the image limit ;) Shsss, don’t tell anyone. I usually combine images anyway, for fast no-preload mouseovers, but just had to take it another stage further to keep within the contest limits!

  21. Come on people... where are all the designs. As you might be able to tell I don’t have a job (just finished uni, so who needs a graduate?). So I’m stuck doing this kind of stuff (so I don’t get rusty!)

    OK, so here’s another one...


    Maybe people can help think up some cool names for these, all I’ve got so far is “brown”, “blue column” and “green”... clever ‘eh?

  22. LoL Trovster!

    Also, i’m doing one cos I can’t focus on writing anyway, now... :)

  23. hehe, Trovster.

    You’re improving each new design, really.
    Nice last one; I like green. :-)

  24. Again, thanks Faruk and Adam. Let’s see if this one improves once again!


    I’ve thought of some lame names for them, considering you guys haven’t! These while do for now:
    1) Contemporary Charlie Brown
    2) Superman Stripes
    3) Lime Green &
    4) Maximum Grey

    I expect yours, Faruk, tomorrow (when I get up!). Enough for today!

  25. Creative, yet again :)

    I’m going to sleep now, but tomorrow during the day I’ll finish mine. :-)

  26. Wow... the entries so far look really great. Sometime you guys should think about posting these designs to oswd.org. I might make a design later.

    Also, I might be able to get this contest some sponsors to provide prizes.

  27. Trov, did you like “Mandatory Swedish” as my title? Actually, that was the name of an album I was doing. I saw it on Wikipedia; love at first sight!

    P.S. Trovster, adding the cite attribute using :after is useless for my firefox because I cannot select and therefore not copy/past the url.

  28. Dante: But it’s more useful than nothing? surely ;)

  29. Nice idea Rob. Good bit of fun. Here’s one with no images:


    Works fine in Firefox, does something amusing but quite funky in Opera and I haven’t dared look in IE ;o)

  30. OK. I call this one “I ripped off Zooibaai in three images!”... now, can anyone guess why?


    I had fun making this one. Trying to keep the images down, which I’ve done! A total of three, so within the rules. Not

    really an original design, though is it. I’ve definitely seen it somewhere before.

    Differences: The title is /slightly/ off. It can be perfect if it was a separate image, but alas rules are rules. The little hand doesn’t move on hover of the h2, again because of combining the images.

    Check the footer, even got the originals text! Yey.

  31. OK, it’s been a while, so I’ve come back with TWO more! Yes, that’s right, two! These two continue the “I ripped off .... in three images!” series. I thought it’s no point trying to butter up Rob, he’s not even one of the judges. So, how about Jina Bolton and John Oxton?



    (Note: You might have to wait a while for the images to load. JinaBolton is missing a navigation item, hey, I’ve only got four to work with and the funky fades at the top and bottom of the page. The Joshuaink rip doesn’t work in IE (more images required...), and uses a total of TWO images!)


    Faruk AteÅŸ: Where’s yours!

  32. Laura’s entry brings to mind del.icio.us.

  33. I’m sorry I’m late, didn’t have any time whatsoever yesterday to get it finished.

    But, here it is:


  34. I wrote a simple HTML document with structural markup and some other stuff that makes sense.

    Say what? That is an XHTML 1.0 Strict document! You serve it (incorrectly) as text/html, though.

  35. HTML as in markup language. Shut up. However, on XHTML 1.0... That may be served as text/html. No must on XHTML 1.0. No sir.

  36. I’ve been working on a little something, but the comments form doesn’t seem to like me.
    Sent my link to Rob - so hopefully you everyone will all get to see it soon.


    Built for firefox - haven’t been able to test it on many browsers yet (well, tested on IE6 - almost looks right).


  37. Mathias,

    Like Rob said, there is no obligation whatsoever for you to serve XHTML documents with application/xhtml+xml - you won’t get any XML-benefits that way. It’s a SHOULD, not a MUST.

    Vital difference.

    Geektechnu: nice!

  38. Hey nice design Faruk AteÅŸ. I really like the zoomable factor of this and the vibrant colours. It’s interesting how people solve issues differently, such as li+li whereas I used li:list-child for the menu items.

    Mathias Bynens: XHTML/HTML come on, who cares. Browsers are not going to notice any difference. And like Rob said, XHTML /should by/ served as XML, but /may/ be served as text/html, which /many/ sites do. It’s XHTML1.1 that /must not be/ served as text/html.

    I hope these comments don’t go off track about a flame war about XHTML vs HTML. Before they do, why not read the case FOR XHTML from Faruk AteÅŸ himself - http://www.kurafire.net/articles/case-for-xhtml and Anne van Kesteren - http://annevankesteren.nl/2004/02/xhtml-versus-html . Enough said on that.

    Mathias Bynens, why don’t you submit a design, after all that is what this article is about.

    geektechnu: Very nice. I like that.

  39. Trovster:

    XHTML 1.1 is a SHOULD still, just FYI.

  40. Mathias, we don’t need the XHTML Nazis here. We’re all friends :)

  41. Faruk AteÅŸ: Eh? HTML “should” be sent as text/html. XHTML “should” be sent as application/xhtml+xml. XHTML1.0 “may be” sent as text/html where as XHTML1.1+ “should not be” sent as text/html, like HTML “should not be” sent as XML. SHOULD is what you “should” be aiming for. MAY BE is acceptable. Anyway, enough of that, it’s all on www.w3.org/TR/xhtml-media-types/#summary in a nice little table.

    Back to the contest!


    That’s a quick one. Still not quite happy with it. I feel it’s missing part. Oh well.

    I’m trying to think of more complex ways of using selectors, but it’s been so long because of the big bad browser, you know who!

  42. oooh... I kick myself for not stumbling upon this before.... is this contest still on???

    I’ll get mine up sometime tonight, hope am not too late :)

  43. I’ve only just seen this post - I’ll knock something up today, well try lol.

  44. Trovster:

    SHOULD NOT is still not MUST NOT. ’s all I’m saying. SHOULD and SHOULD NOT are just too flexible, still.

  45. Jeez you MIME-type whores! Shut up alright! ;)

    Wow people. Lots and lots of good stuff already. They all seem to have something that I didn’t even think feasible with the markup I provided, and there’s a lot of smart stuff going on. Keep it coming, I predict we still have about a week...

  46. “Mister winner will be receiving the swell Color Schemer app.”

    ... but what if that’s Miss, Mrs or Ms winner? ;)

  47. Nice contest. One small note though: you can’t legally apply licenses to other people’s work. Either make it part of the requirements to license under CC, or don’t license at all :)

  48. Missus, mistuh, whatever. I tried to make it sound only slightly general, but it failed didn’t it? :)

    Mark, that’s funny. I shall have to ask every person to provide their own desires regarding licenses then. Thanks for the heads-up.

  49. Nah, not really, I was just being ultra picky :)

  50. here is my effort it won’t work with IE. :(

    it is not exactly a site i would build for a client but it is fun to experiment nonetheless.

  51. Hi, here is my attempt.

  52. Now for some fun. This is me trying to make it look like my blog :)
    This was fun to do - my WordPress theme’s html has way more styling hooks, and more images too. IE6 kept un-nesting my navigation menu (but would fix itself upon refresh... odd).

    I’ll name this one after my blog theme: “That Aero Blog”

    Displays correctly in Firefox and IE6 (yay). Makes be want to rework my blog’s html.

  53. http://zooibaai.nl/sandbox/contests/2005/pushing/?file=http://zooibaai.trovster.com/zooibaai2005-9.css

    “Mr Pinstripe Suit”.

    geektechnu: Interesting image technique for the rounded corners on your style, with the one image. Might have too look at that a little closer.

  54. Damn Trovster, you’re like the Elton John of CSS: churning out a new design every few hours!

  55. I am a professional web designer, I don’t need to prove anything!


    Good luck to everyone.

  56. I’m not a professional web designer (I’m a big phat wanna-be, so if anyone wants to give a graduate a job, let me know...), I need to prove everything!

    OK, here’s another one in the “I ripped off ###### in three images (or less)!” category. I’m really quite please how this has turned out (in Firefox of course, need a lot more elements/ids for IE!).


    OK, here’s a request to YOU guys. What site would /you/ like see on in the “I ripped off ###### in three images (or less)!” category? And I’ll try and do it...

  57. should support longer h1 titles, 2 lines worth
    should support up to 10 buttons for #navigation in 2 lines worth.
    the heading title of the document should be clear
    slight contrast change between primary and secondary content areas, both should catch the viewers eye
    floated, use more space, less vertical scrolling; inner padding for some white-space comfortability
    tested floated primary column for longer content, clearing the float for footer
    should not be a 3px jog bug
    should be easy to ready
    should load fast
    should be relative to font size changes
    dev.time: 1hr
    tweak.time: 1hr
    total: 2hr

  58. Oh my God trovster.

    You have some talent buddy!

  59. trovster I really like #9 and #10. good job indeed!

    slight update on my end, I submitted too soon last night, and decided to go a different way with it (is that even allowed) this is the final look for this version.... moving on...


  60. Here’s my submission:


  61. Trovster, you seem to be up for the challenge, so why not try porting over http://alazanto.org/ ? I’d really like to see that in three images. ;)

  62. Trovster is just ripping other people’s CSS...
    Now, in most cases it’s clear and he has turned into a gimmick, but at the rate he’s churning out designs one may start wondering whether ALL his attempts are rip-offs.

  63. Here is my first attempt at this. I may do another one as well if I get the time.


  64. Ooh, when is the cut off time? I might do one over the weekend, but I don’t want to miss the boat ;-)

  65. “Trovster is just ripping other people’s CSS…”

    Or, he’s having a bit of fun and learning something as well. Lighten up feller.

  66. Urm. Designs 1 to 4 and 8 to 9 are my designs. You can tell, coz they’re not very good! The others I clearly state that they’re rip offs. I first decided to emulate THIS site in three images, but then I said that’s no good, I should emulate the JUDGES site if I want to influence any one. It’s just a bit of fun! And the rate I’m churnig them out... well, I know CSS, sorry. And I don’t have a job, just finished university... so plenty of time on my hands.

    Jonathan Fenocchi: OK, no problem, I’ll see what I can do!

    Kev: You got the idea! It’s really great to apply CSS from other peoples designs, it gives you experience apply preset designs, so you can’t just leave a part out if you can’t do it!

  67. Trovster, after trying to rip myself off in my last attempt, I know that emulating a design can sometimes be a real mindbender,

    On the other hand, I spend a lot of time in Photoshop working out design concepts, so I also understand kiji’s angle on things. The artwork itself can make or break a design.

    But, from a CSS coding perspective (and lateral thinking) I think you’re doing a good job. Bloody fast too!

  68. Nik Steffen: Best I’ve seen so far.

    geektechnu: Like I said, I’m no designer. I choose some colours with some help from Adam Polselli “Get The Look” articles. I decided what width and side to use. Added a few block colours and then tried to add some extras the design in the form of a crappy logo and some other images.

    Can’t people TELL that my “designs” aren’t really any good. They’re just a few colours and 10 minute job on a logo. I’m not a photoshop wizz so I just end up doing plain text logos (as you can tell). If any more people think I’m ripping off designs I don’t know what to do. Either take it as a complement, as they think they’re OK, or just stop on the contest.

    I’ll do http://alazanto.org/ as it’s been requested, then I suppose I’ll have to find something ELSE to do to keep me occupied. Great :(

  69. Trovster, appologies if I sounded like a critic. I personally don’t have a problem with what you’re doing. I’ve had a great time logging on to the site a few times a day to see what you’ve put together. I never really thought about putting completely seperate image elements into one file before I saw some of your posts above.

    I was just making a point to everyone that this stuff is both “css design” and “graphic design”. Complex design -> minimal markup isn’t easy. Trovster’s got the css part licked - and there’s nothing wrong with that.

    I enjoyed trovster’s entires 2 & 4 just as much as the lookalike designs (which made me go: wait... how did he do that?).

  70. Jonathan Fenocchi: OK, are you ready for it? It’s not perfect, not by a long way! It’s missing the shadow on the main content, and the top shadow on the body, but apart from that I hope it’s pretty accurate... and yes, only three images! Althought the “big-bits” PNG is a wopping 690k, so please be patient!! HAHA (darn the 3 images rule).

    So, for Jon, here’s “I ripped off alazanto.org in three images!”

    geektechnu: Cool that you’ve picked up the combining images. I really like what you did with that one, to create the corners at the top and the bottom.

    Anyone else to suggest a design?

  71. trovster, i’d like to see you try something harder, like a non css design. you know - those big corporate ones.

  72. Here’s my third attempt :)

    I call this one the “Moroccan Waterman”. I grabbed all the colors that would suit and made a little Moroccan melange so to speak.

  73. ”... It’s missing the shadow on the main content, and the top shadow on the body ...”

    That’s cool - without shadows is exactly how it displays in IE. Makes me want to do another design. Notice how my 2nd entry contains shadows on the top and body? I wonder how far I can push that technique...

    [rushes off to find more places to hide images]

  74. Ok well.. I am new to CSS and have been trying to submit this for days.. looks like the submission errors are solved..


    Not the best I can do but at least it’s not a rip like trovster, that bastard..

    Just kidding, you have some nice looking rips trov. :-)

  75. Here is my first attempt. Be gentle.

  76. This one’s for you trovster! When our powers combine... (we become Captain CSS?!?)

    alazanto.org in 3 images with full top and body shadows! Built for Firefox.

    CSS text formatting credit goes to trovster. I’ve redone nearly all of the layout code and used my own interpretation of the images.

    Looks more authentic - but not a flexible as trovster’s version.

  77. Why do people not add the http:// all the time? Or does it get stripped out in some cases? o_O

  78. Faruk AteÅŸ: Seems like the comments form’s built in spam blocking is too harsh on some people when there’s a URL in the text. For me, including a URL often results in the page timing out.

    No clickable link - it goes straight through the spam filter.

  79. Yup! It’s quite annoying in fact, but hey.

    geektechnu: !!! I don’t think those shadows really matter, I’ve got the original menu and title, where you’ve changed them for the competition, which is cool. The fancy part on the sidebar is under the text on your version. I suppose I could add the side shadow to the main part, but didn’t get round to it.

    Also your images are smaller, which is obviously much better. I like how you create the main image. You basically get rid of the whole middle repeating part, and put to the side. Easy to see how it’ll work for people looking at the code IMO.

    (Captain Planet!)

  80. “No clickable link - it goes straight through the spam filter.”

    No wonder it took me like a week to make my first submission...

  81. ...theres no explantion of how to make a hyperlink using the comments box. i presumed i could use textile, but no. an email sorted out my erroneous post but I still don’t know how - for next time.

  82. Sheesh. If you have any qualms with me or how WordPress deals its spam issues, mail me. Don’t go off-topic here, thank you.

    And for those who want something concrete: I’m working on it.

    Back to business.

  83. The winner of the contest probably doesn’t need a tool to helpcreate its color shemes after all though. So you are now targeting those who can’t win :-P

  84. Is the Comment for me Bas Westerbaan?

  85. Michael, I think Bas Westerbaan is just saying that many of the entries here are showing great color use already.

    However, after taking a look at the homepage for Color Schemer, I’d have to say that it could greatly speed up a lot of poeple’s workflow when it comes to picking colors.

  86. addendum: it probably only works in FF1.0.4 on my winxpprosp2 machine.

  87. Well, I’m sorely dissapointed with my entry, but I’m done nonetheless, as I want to play with PHP Studio. Here it is:

    My Submission

    it was supposed to look like this, but I got lazy (and bored):

  88. Hi. My grandfather and I are really not into competition or following rules for that matter-- just thought it might be fun. So, we’re submitting:something, and eliminating ourseves from the contest at the same time. For what it’s worth, here’s ours:
    Neea Laakso

  89. I am entering to embarass myself :)


    Here’s my submission.
    CAUTION: Only fullscreen please :) Thanks

  90. You can’t do that! You can’t just leave and come to crummy ‘ole England without announcing the winners. Enjoy England, though it’s raining a lot at the moment.

  91. Hey Rob, cool to have this going... I’ll give it a whirl if I can free up some time!

  92. I’m very excited about the project as I just finished a design theme for csszengarden.com
    You can have a look at http://www.celebrityblog.net/zengarden/zengarden-sample.htm

  93. Wow. I know I probably missed the contest, but I just found this site and thought that there were some great templates. I could really use these in my sites. If you get a chance, check out my site, dragotown.com

    I will be back very soon to post my entry.

  94. Wow. I know I probably missed the contest, but I just found this site and thought that there were some great templates. I could really use these in my sites. If you get a chance, check out my site, dragotown.com

    I will be back very soon to post my entry.

    Nick, from dragotown.com

Participate, yes!

(Rock out with Textile; it's what the cool people use!)