Codepen Pattern Rodeo on CSS Regions | Web Platform Team Blog



Web Platform Team Blog

Making the web awesome

Codepen Pattern Rodeo on CSS Regions

Last week a new Pattern Rodeo contest was posted on the CodePen blog. Chris Coyier from CSS Tricks challenged folks to use CSS Regions in their designs. These pens could work with the experimental regions implementations in Chrome Canary or IE10, or use the Regions polyfill in other browsers. Twenty-three people entered the contest. The two entries with the most hearts won the prize for this week, which was a year’s subscription to Creative Cloud.

The first winner with 48 hearts was Tyler Fry, who created an interesting reading carousel out of regions and transforms. I think it would be interesting to experiment with continuous versus looping carousels.

The runner-up with 45 hearts was Joshua Hibbert, who created an exploding book. I particularly like the book opening slightly on hover, and the reverse animation when you’re done reading.

Congratulation to the winners, and thanks to Chris for hosting the contest. Please take a look at the winning designs, then browse through the rest of the submissions (you can see all the entries using the rodeo-004 tag on CodePen).

Comments are closed.