Grow your CSS skills. Land your dream job.

CSS Off Update

Published by Chris Coyier

Wave that checkered flag! Comments are closed and the entry form is shut down as the deadline for the CSS Off has now passed. We had an incredible 136 entries! A few right at the buzzer which makes me worry some people didn't make it, but them was the rules. I honestly thought there would be 20, 30 tops.

We'll begin judging shortly. This is going to be a big task for @dougneiner and I, so please bear with us as it goes on, it will likely take a few weeks. At some point, we'll make every entry browseable by all, with notes and scores. Then shortly after that, we'll announce the winners and begin the prize-choosing stuff.

As promised, I will be making a donation to a Haiti-relief charity of $408. I'm going to research it a bit more, but I'm thinking Doctors Without Borders.

In Other News

I made and use my own "base" WordPress theme when starting a new WordPress project. I call it BLANK and I made it available today over on Digging Into WordPress if you want to check it out.

I recently had someone ask if there was a way to make a public page to show someone (e.g. a client) the status of the sites in their Are My Sites Up account. You can, and I showed how.

Comments

  1. Permalink to comment#

    wow, 136 is a lot!
    I can’t wait to see the results. I learned a lot by participating in the competition.

  2. It was definitely a fun competition to participate in. While there were a few ideas that I ran out of time to implement (I only started a couple days ago), I’m pretty proud of my entry. I hope the fact that I didn’t put it all in a folder within the .zip doesn’t disqualify me!

  3. WOW! That’s a lot of entries. Good luck to you and Mr. Niener. I’m sure it will take a long time. I’m definitely interested to see all the different entries.

    Oh, and on a side note, thanks for offering that BLANK WordPress theme for download. It will be my default WordPress theme to develop from now on. :)

  4. Permalink to comment#

    Damn! Didn’t make it. This was definitely fun to be a part of. Can’t wait to see the results!

  5. Awesome!

    Look for forward to the results, kinda wish I spent more time on mine haha

  6. Jeppe
    Permalink to comment#

    I love to hear how you guys did it?
    How did you do the fonts?
    What about the button?

    I used the cufon script for the headings, menu and buttons for the fonts. I tried with @font-face first off, but decided against it later. I actually went for pixel perfection on this one, which is also why i chose cufon.

    Then for some fancy stuff, i decided to do a sprite for the date field, just so show off kinda haha.

    And of course i went with the sliding doors technique for the button.

    I didnt really use to much CSS 3 if i recall, but i did however make it work across all browsers, with only a couple of pixels difference in IE6.

    It could have been much easier if we didnt have to support IE at all, with CSS3 and multiple backgrounds and all. But i think it went pretty well without.

    • Permalink to comment#

      I didn’t use font replacement techniques because of the licensing issues. So I used image replacement.

    • hmm, didn’t think about changing the font :/
      Though I wish I did. As for the button, I used a single image gradient, width about 1px, repeated it across and rounded it out with css3 and a border color for effect.

    • Permalink to comment#

      Seems like a good job – how about posting it online? :>

    • Jeppe
      Permalink to comment#

      I think I’ll wait till Chris is done with the voting :)

    • JLou
      Permalink to comment#

      For the font I use a similar one (“Existence Light”) and @font-face

  7. Glad to hear I wasn’t the only one to struggle in finding the time! Mine was finished on my lunch break today!

    I went down the route of CSS3 progressively degrading unfortunately my lunch wasn’t quiet long enough to make IE6 entirely happy but all else was pretty set!

    I’m imagining a high standard across the board and looking forward to the results!

    Congrats + Thanks to Chris for such a challenging design!

    + Thanks in advance to Chris and Doug for taking the time out to go through and judge these!

  8. Permalink to comment#

    At first I had a lot of plans with what I wanted to do with this, including maybe adding some jquery and css3 for progressive enhancement, but in the end I chose to just try to use lean, pretty code and make it as accurate to spec as possible across all browsers, including IE6. In that regard I feel I succeeded. As a previous print-only designer I have been coding html and css for only 8 months or so, but I am loving it, it is very rewarding, even with all the frustrations it can bring. I am very curious to see how mine stacks up with all others. I have a lot of respect for what you do here Chris and someday I hope to be as good as you at what I do. Keep up the awesome work, it is appreciated.

  9. Permalink to comment#

    I had a lot of fun with this. I don’t know if I’ll win or lose, but I’m glad that my entry with notes and grades will be available. I’m really interested in seeing how others went about coding the design. I wonder if my solution was common or unorthodox.

    I’m proud of my entry and learned a lot in the process. My final code was much different then how I originally planned on doing it when I originally glanced at the PSD. I’ll be honest, I thought the design was deceivingly difficult.

    Perhaps I’ll even write a blog post about my own thought process in coding the design.

  10. Permalink to comment#

    I threw mine together in about 3 hours so I didn’t get a chance to use any cool font replacement techniques. I just used for images for text that was “fancy”.

    The only part of the design I was stumped on was how to get the paragraphs to wrap around the image the way it was in the image. It just doesn’t seem possible from what I know about CSS so I simplified it.

    Hopefully I did alright with it. It looks almost 100% identical across all browsers so YAY!!

    • Permalink to comment#

      If you use an inline element such as a span as the container for the image, you can add it inside a paragraph and float it left, apply a few margins for spacing, and the text will wrap around it…

  11. Permalink to comment#

    I wish I would have had time to enter, but I look forward to seeing the results!

  12. This was fun! I focused on slim, semantic and accessible markup. It’s pure CSS and HTML. The benefit was that I didn’t need any browser-hacks (even for IE6)…
    It took me about 4 hours and afterwards I wish I spent some more time on the whole thing to make it more perfect (especially the background behavior).
    Let’s see what it brings…

  13. I have heard great things about Doctors without Borders. That should be a save bet.

  14. Gonna be cool to get some feedback/notes from you cool guys :)

  15. Permalink to comment#

    Interesting that there are 135 other entrants – though to be honest, I wasn’t sure how many there would be. Nice to get a picture of the competition ;)

    I’ll admit that I had more planned for my entry – I was going to use it as an opportunity to experiment with some extra whizz and clever stuff, but got sidetracked over the last few days on other projects and ended up just sticking to just mimicking the PSD.

    Had a late-nighter (actually early morning) last night working on it, and finished off a couple of bits in my lunchbreak today (fortunately the CST timezone is 5 hours behind us here in the UK).

    Kind of excited, but also nervous that our work is going to be scored and made public! Will be interesting to see others’ techniques.

    Thanks for the competition Chris. Hoping that more are to come. I reckon it could generate quite a buzz in the CSS world, especially if it’s a regular thing.

    PS. Thank you, Dropbox! :D

  16. Permalink to comment#

    I didn`t use any fancy techniques it doesn`t need anything like this also i didn`t use image replacements or any stuff like that it`s all CSS/HTML with some progressive enhancement stuff, working in all browsers including IE6 off course (it should not look the same in every browser)

    i finished it today too i didn`t have enough time but i`m quite happy with what i did .

  17. José Pedro
    Permalink to comment#

    Wow… 135 entrances… that is way too much… I also noticed I did a big failed by accidentally forgetting to place all contents in the proper “CSS Off Entry – YOUR NAME” folder…

    Nonetheless, I used pure HTML 5, with the html5 enabling script so as to make it work on IE. I also used ie8.js and a single ie-only stylesheet as to address any issues form this browser.

    I used one of the Font Squirrel’s Fontface fonts as to replace Helvetica Neue on systems that don’t have it. I did disable it on IE due to the antialiasing problems.

    I used alpha backgrounds and background gradients instead of images where I could (even on IE).

    I used a simple font shadow as hover effect for normal links.

    It was a very interesting contest and I had the opportunity to improve my coding, so I am satisfied, no mater the results.

    • José Pedro
      Permalink to comment#

      I meant “I also noticed I did a big fail by accidentally…”

    • José Pedro
      Permalink to comment#

      I’ve decided to place my copy online too, but just for a few time. It is available in ptmblogger.co.cc/files/CSS-Off. Tell me what you think, and have in mind that I had no Helvetica Neue to test with.

    • Permalink to comment#

      Well, nice use of HTML 5 but haven’t you checked yours in IE 6. It looks completely messed up to me.

      If there is no credit given to HTML 5 and CSS 3 why take a risk?

    • Permalink to comment#

      BTW here are two screenshot I took in IE 6. In IE 7 yours looks a bit better but still messed up. Don’t know what you mean “with the html5 enabling script so as to make it work on IE”.

      http://img685.imageshack.us/img685/870/ie6.png

      http://img685.imageshack.us/img685/4835/ie61.png

    • José Pedro
      Permalink to comment#

      DW: I meant this script: http://code.google.com/p/html5shiv/

      I did hide the clock on purpose because of IE6′s problems with transparency, and because I can’t use background positioning when using the alpha filter.

      That problem on the footer was my laziness. I didn’t manage to make the copyright and footer text to works as expected on IE7 and lower, so I simply disabled all floats, but forgot to make the copyright to be aligned with the text.

      And I used a “cheap replacement” for css text shadow using the glow filter on IE, but I regret it now…

      Anyway, don’t forget that the design doesn’t need to be pixel perfect on older browsers, only usable.

      Although I still didn’t understand how did you manage to get the web font to work with IE, I didn’t leave the .eot file because it didn’t look good in IE… O_O

    • Marcel
      Permalink to comment#

      Looks nice, but where are the fading colours in the three bottom boxes?

      Also, I wouldn’t have used @font-face, I think there’s way too little support for it. I would have used image replacement, at least for the logo.

    • Marcel
      Permalink to comment#

      And where are the little shadows over the red lines, to the left and right of the main box? ;)

    • Jeppe
      Permalink to comment#

      Oh, i’ve completely forgotten about those shadows. Oh well.. :(

    • José Pedro
      Permalink to comment#

      I am really distracted, I only noticed now that the final entries were going to be posted online! I’ve decided to take down the page now.

      Also, thank you to everybody who posted their opinions, as you gave me a few points of view to consider next time I am coding.

  18. Hey Chris I wanna know if I can put my entry in my site as a studie to share with my friends or if I have to wait the results?

  19. Indiana.Matt
    Permalink to comment#

    How exciting! It’ll be a long few week waiting for the results. I wish I weren’t a beginner at all this web design stuff. I would have loved to have entered a solution for the mockup. I collect clocks and work on them, so I have a great appreciation for the time theme. I look forward to seeing all the entries.

  20. Permalink to comment#

    Wow! 136 entries, that is a big success for this competition Chris. You are sure very happy to know that how much your readers love and respect you. I mean … I dont really care about the prize … but like you said it is a pride to join a competition like this.

    I learned few things along the way. Admittedly the mockup is more complicated than it looks. The Z-index thingy, elements overlap each other, pictures appear in challenging position… is the fun I had with this mockup.

    Of course I hope I can win this competition, but if not I am still very happy to learn from the others. I guess this mock up is by far the most converted to HTML out there. There are 136 (hopefully) different ways of doing this. So must be very interesting to see not the same perspectives and techniques. Maybe some creative folks would spice up the design even better with jQuery, Javascript etc.

    Anyway, without my entry the donation to Haiti could have been $405 ha ha so it makes me happy too.

  21. Permalink to comment#

    I’m curious to find out the range of zip file sizes.

  22. Erez Shalom
    Permalink to comment#

    if i forgot to name the zip file with the correct form,i’m out?

    • I don’t think I’ll be marking off for screwing up the zip file name or the folder name. But you really needed to have an index.html file in the folder. It would take far too much time to seek out the organization any other way.

  23. Permalink to comment#

    I do like that idea (; I didn’t have time to participate in contest, but last night I’ve spend couple hours just for fun. I’d like to see other works out of curosity – can’t wait for the results (; Here’s mine: http://mwit.info/css-tricks
    (no font tricks, min play with keep reading btn, no cond styles, no js)

    • Permalink to comment#

      Mark up is clean, looks smooth in FF but in IE 6 your min-height a bit messed up.

      Other than that nicely done. Goodluck.

    • Permalink to comment#

      Scratch that above comment, I mean in iPhone version. But that is not count I suppose. So well done :p

  24. Eamonn
    Permalink to comment#

    Hey Chris, well done on the whole project and the money you’ve very generously ‘raised’ for Haiti. Very well done indeed.

  25. Mads
    Permalink to comment#

    Aww, shit! I thought i said Friday :/ Been working on it all week, lol :p I hope you will have a contest like this again, it was fun!

    Nice that so many entered! Good luck to all! :)

  26. theasta
    Permalink to comment#

    Doctors without borders is a great choice. I worked for this organization as a video editor in France (MSF) and they were really nice and well-organized people. Definitely an NGO you can trust.

  27. Marc
    Permalink to comment#

    Is a shame that i was really busy with a project with a close deadline, i ‘d like to give more time to my entry. anyways thanks for that cool css off and regards from spain :)

  28. Steven Schrab
    Permalink to comment#

    Was a really fun challenge. The design was deceptively challenging. Very good exercise.

  29. bzgzd
    Permalink to comment#

    Somehow I found this page looking for wordpress which I never used before but now I would like to put it on my page… so thanks for “blank theme”.

    Even it is not as empty as I hoped… :-)

    There are some things I don’t even know what it is, like

    and wp_head() seams to link to jQuery ??? … i had no idea wordpress needs jQuery

  30. Michael
    Permalink to comment#

    I’ll be busily kicking myself all day… I had my entry all ready to submit at 4am (pacific) with plenty of time to spare… then found out that the deadline was YESTERDAY. Sigh. Since it’s not in the contest, no harm showing it off:

    -Michael

  31. I tried to make it, but I’ve been so busy at work. I hope there will be another one soon. I really like this idea!

  32. Al
    Permalink to comment#

    wow, lots of entries

    looking forward to the results and display of the entries, should be interesting to see how web devs did their thing

    some interestin challenges to the design

    Al

  33. Daniel
    Permalink to comment#

    Unfortunately I could not find the time to enter :( When you post them Chris it would be cool to see what people did right and wrong. I may still do it anyway for myself. The best way to learn is to just dig in and do it.

    • Daniel
      Permalink to comment#

      Meaning if you could point out what they did right and wrong.

  34. Bradley Rosenfeld
    Permalink to comment#

    Wow, 135 other entries is sure a lot for me to beat :P

    But anyway, like everyone I think I have a good shot and thanks to Chris for hosting this contest.

  35. Was just checking on the status of the competition. Wow, 135!

    Feeling confident though. Good luck to all the other participants in the fray :)

  36. ckn
    Permalink to comment#

    February was a crazy month of work so I completely missed the CSS Off. Bummer! It would have been really helpful to see how I stack up against the competition, get a grade and feedback. This weekend I’ll complete the exercise for my own benefit/learning. If you don’t mind sharing, how many hours did it take people to complete the exercise?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".