istartedsomething

ReStyling MIX08: CSS competition

January 29th, 2008 by Long Zheng
Jump to comments

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.


Comments for "ReStyling MIX08: CSS competition"

  1. Mikael Söderström

    Looks really nice!

    But it would be more nice if the background was fixed, I think. =)

  2. Long Zheng

    @Mikael: I considered that actually, although it felt too ’static’, like things were stuck together.

  3. tino

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

  4. bernard

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

  5. GRiNSER

    the original theme is not designed for IE6 either so i think that doesn’t make any problems :)

  6. Chustar

    Making the web page into an actual Word DOC was kinda unique.Kudos!

  7. Tom

    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 :)

  8. Long Zheng

    @Tom: You’re the second person to suggest that, and point taken. But the tradition way is easier/quicker to implement.

  9. sb.net

    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



Ask for Genuine istartedsomething blog