How Orangina shook up its site with CSS3

Discover how the soft drink's site redesign was powered by CSS3's perspective property.

There’s so much to say about the soft drink Orangina's website redesign, I don’t know where to begin. This site has it all: beauty, craft, quirkiness, unexpectedness, movement, balance.

Upon loading up the landing page, you’re presented with lovely, highly detailed product photography, animations and what might be the finest use of CSS3’s perspective property I’ve ever seen.

Button and image box perspectives shake things up (pun intended) and add welcome personality by throwing something unusual at what could have been a standard, mundane grid.

The main typeface – Berthold Block Condensed – compliments the quirkiness of the graphic and grid elements nicely, too.

According to Achtung!, the design took Orangina’s ‘Shake things up’ slogan as its starting point, with animations adding a wonderful touch and ‘shaking’ product photography complimenting the theme perfectly. Well done for bringing a refreshing new site to the web!

Words: Brian Hoff

Brian is the founder and creative director of Brian Hoff Design, a Philadelphia-based boutique digital agency creating web and mobile platforms and products. Follow him on Twitter at @behoff.

Like this? Read these!

Have you seen any amazing new sites or portfolios? Let us know in the Comments!