CSSOff 2013 Round-up

February 9, 2014

The CSSOff is an annual competition where web designers are given two weeks to turn a Photoshop mock-up into a functional web page. Submissions are judged on a number of factors, from code cleanliness to browser support to performance.

This year was particularly tough: the mock-up was stuffed with a variety of intricately designed pieces that required a lot of attention to detail and clever use of front-end technologies. Overall, I was happy with my entry, but I know there’s a lot of room for improvement.

The best part of this contest is seeing all of the brilliant entries from fellow web developers and designers who rose to the challenge. Below I’ve collected a few that contestants shared on Twitter (with some notable areas pointed out):

(If you would like to add yours to the list, just post it in the comments!)

Entries

Entry from Damian Frizzi: Zoom effect on headline hover, fading bullets on hover
Entry from Nicolas: Zooming bullets with fade-in text, map reveal, map slide on smaller viewports
Entry from Anastasia: Map slide, floating overflow
Entry from Mike: Boot surprise reveal, DVD surprise reveal, overflow floating
Entry from @agentquay: Bottom line head movements, Overflow text swaying, easing between responsive viewports
Entry from Michael: Barbie unboxing, fade transition on photo, bubbles
Entry from @lhtdesignde: Title reveal, bullet zoom effect, page flip map reveal, swaying overflow
Entry from Binyamin Laukstein: Photo shifting effect, DVD rotate effect
Entry from Josh York: Parallax Beatles effect, page flip map reveal
Entry from @patchgill: Floating overflow, smooth responsive transformations
Entry from @stommepoes: Page flip map reveal, comprehensive ARIA attributes
Entry from @sprungmarkers: Slide-out mobile menu
Entry from @pantaa: An insane entry, from the fade-ins on the photo to the spinning Barbie to the scrolling Beatles. Yeesh
Entry from @cmicek: Page flip map reveal, fun floating bubbles
Entry from @geertmelotte: Highlighting hover effect on bullets
Entry from @taip: Split Transformers ticket on smaller viewports
Entry from @csswebgirl: Fade-in map reveal
Entry from @scarfacedeb: Slide-out Barbie unboxing
Entry from @chrisrockwell: Horizontal bullet orientation on smaller viewports
Entry from @piensaenpixel: Smooth bullet hover effect
Entry from @mwdesigner: Layout bullets on smaller viewports
Entry from @JuSchz: Slide-out Barbie unboxing, Transfomers box flip
Entry from @jonathanreece: “Positioning Relatives” shadow, floating boots
Entry from @krisztoth: Squishy bullets, floating “CSSOff”
Entry from @dmatei13: Loading fade-in
Entry from @funparko: Bullet animations, “Overflow” ripples
Entry from @technobulka: Hover effect on map corner
Entry from @rkrupinski: Bullet highlighting and responsive layouts