ReStyling MIX08: CSS competition

Mix08Every year since Microsoft has held the MIX conference in Las Vegas, it has also held a CSS web design competition. This year it’s called ReStyle. The premise of the competition is identical to most CSS competitions out there – most notably css Zen Garden. Designers are given a HTML template filled with content to work with, they are limited to only CSS and images linked via CSS to come up with creative ways to style the static content.

Microsoft’s ReStyle competition is ending soon on February 7. A panel of judges will pick three winners based on quality, creativity, and usability of the designs. The winners are awarded with a paid registration to MIX, hotel stay and up to $1000 in travel allowance. Unfortunately that means most visitors outside of the United States will still have to contribute a portion of the travel by themselves, or paddle on a small raft across the ocean.

Last night I had an idea pop into my head. My head’s fine, thanks for your concern. At approximately 11pm I started with this sample template. Spent four hours to end up with this.

officemix.jpg

Tested for compatibility only in Firefox 2 and IE7. Yep, that is real transparen-see as you can see with the alternative background here (thanks to Squidfingers for the patterned background). It wasn’t easy, but it was well worth it.

Check out some of the other submissions already at the ReStyle Gallery. There’s bound to be more great designs submitted in the next few days since the submission form hadn’t been working for a while. In the chance I do win, I’m hoping to give away the opportunity to attend MIX to a lucky somebody because it looks like I’ll be attending anyway as a guest of Microsoft Australia. Don’t hold your breath.

9 insightful thoughts

  1. Nice ideas with that RSS icon and the Office Art controls. But with that faked window you may not get the prize for usability 😉

  2. Too bad it wasn’t a Silverlight competition. It would’ve looked kickass being able to control the text zoom and other things!

  3. Nice job there (:
    Though it might be better to achieve the hover effect by background offsetting, the way it is now there’s always a noticeable gap until the hover image loads.

    I like your idea :)

  4. Do you know where I can get more patterns just like Squidfingers patterens? I’ve been looking like patterns just like these..

    Thanks

Leave a Reply