2012 in review: designer Val Head selects 20 of the best uses of CSS we've seen this year
2012 has been an impressive year for unique and surprising uses of CSS! Picking a list of the best uses of CSS for the year is a tough challenge since CSS covers everything from media queries and web type to animations and 3D. You can't really make much of a website without CSS! I've picked a list of standouts from the past year across all the many ways CSS can show its face.
It's impossible to compare the use of web type to cutting edge CSS 3D one to one, so I present these selections in no particular order. Did I miss some? Add them in the comments below. There's no reason this list has to stop at 20, it's a big big internet out there!
I've never been to Beercamp, but I know they always have a site that makes an impression thanks to the folks at nclud. This year's site featured an interactive pop-up book powered by 3D CSS transforms. Each monster illustration expands and rotates as you flip through the pages.
Spelltower isn't just a terribly addictive game, it also has a site that's full of fun and personality. The playful use of animations and transitions make you want to grab an iPhone and fire up a game.
3. Envy Labs
One of Envy Labs' taglines is "We create fun". A rotating illustrated carousel powered by CSS transforms and transitions is quite fun! It even scales and functions responsively which had to be a bit of a challenge. On top of that, the site also features some well picked web type, CSS transitions on hover, and CSS-driven shapes.
4. Fine Goods
Fine Goods, by Rogie King, is a boutique goods market aiming to provide quality icons, resources, and more to designers. The playful site uses an assemblage of CSS properties to craft this custom design. The price tags contain HTML text, rotated with transforms and the animations on the navigation drawers are full of personality and even surprise you a little.
5. Mammoth Booth
Photo Booths are tons of fun so a site for a Photo Booth should be too! The folks at MammothReach nailed it with a site for Mammoth Booth that reflects what the photo booth experience is all about. The subtle animations add some punch to the illustrations while transforms and box shadows are used to give the photos just the right amount of real photo feel.
The Postable site, developed by Kevin Kneifel, has a lot of personality for a web app. Fun and useful illustrations combined with clever hovers and transitions keep the site engaging and easy to figure out. When your contacts are filling out your form, they'll be using a pure CSS select box: “This involved masking the select boxes on the forms with an outer div, adding transparency, and the use of -webkit-appearance. The result is a box that looks good on all browsers and degrades gracefully," says Kneifel.
7. Lift Interactive
Lift Interactive has done a heck of a job balancing good design with various effects and still keeping it perfectly classy. The site is full of little extra touches accomplished with transitions and transforms, but my favourite is the 3D transforms on the books. A wonderfully executed effect that adds a touch of a surprise.
8. Impress a Penguin
Penguin Press decided to try something different to find community manager so they created Impress a Penguin to aid in their search. More than just a slideshow, the site uses borders and drop shadows to really give you the feel of them being pages in a book. The Penguin illustrations on each page by Isobel Knowles make for a great storytelling experience.
Paravel designed and built a whole new home page for Microsoft. This page has been much talked about for its responsiveness, but the attention to detail doesn't stop there. The way the transitions are orchestrated across the various elements on the page really pulls everything together in a polished way.
10. Stuff & Nonsense
It's hard not to smile when you see the illustrated characters swap out at different points via media queries in the header of this one. The illustrations, by Josh Cleland, bring lots of personality to this latest redesign for Andy Clarke’s Stuff & Nonsense.
The folks from Riot put together a very well thought out site for their latest software offering, Hammer. The use of transitions on hover for the hero area is a refreshing alternative to a carousel. Designing it to look like it's happening on your laptop is a nice touch too.
12. Lab Partners
The site for the stylish art and design studio, Lab Partners, conveys a strong message through their choice of colours and attention to detail. It features an atypical carousel and a well curated layout in the work section. Their shop is running on Big Cartel but you wouldn't know it, it's integrated into the site extremely well with custom CSS applied across the board.
13. Always Creative
Always Creative, an agency based in Huston, put together a site that shows off how much you can accomplish with a limited number of colours and typefaces. Proxima Nova and FF Tisa Web Pro are two web designer favourites that are very well used here. They've added a little bit of unexpectedness with the zoom on the hovers of their portfolio section and the subtle animation in the header as well.
The Chartbeat folks pull you in with some wonderfully chosen colour and type on their site to start out. Then, the subtle touches of animation and transforms will keep you intrigued as you scroll through the product overview.
15. OPower UX
The poppy transitions on this OPower UX team page shows off a team with personality. The stylish use of FF Dagny at a variety of weights and the simple icons round out the page telling you all about the team.
16. Circles Conference
The Circles conference site matches different faces and weights of web type with skill. Add in the the peppy colour pallet and you've got a great looking site that embodies what the conference is all about.
17. Two Paperdolls
Two Paperdolls is a letterpress studio with a elegant website. The homepage offers two prominent pathways emphasised by adding colour to the images on hover. But they aren't without a fun side, the staff page features paper dolls with animated bobble heads.“It transformed a static, boring staff page into a bobble head bonanza of fun,” says Philip Meissner, the designer/developer behind the site. It's hard not to smile at animations used like that.
The Jukely site is just a landing page for an upcoming service but it packs in a lot of personality. The animations used to set each element softly into place fits the feel of the gradient page background. Interacting with the sign-up form is full of surprise and delight even though you have little idea what you're signing up for. Maybe that's the next surprise.
19. Station Four
20. United Pixelworkers
The United Pixelworkers guys actually redesigned twice this year and the current version of the site definitely rocks. The layout is wonderfully responsive, a great use of web type, and the design features spirited transitions on hovers that keep the task of picking out a shirt fun.
Footnote: Some of the text and quotes used in this article were taken from the CSS Gallery in .net Magazine, written by Jenn Lukas. Thanks, Jenn!