The Shorty Awards honor the best of social media and digital. View this season's finalists!

Special Project

Special Project
From the 7th Annual Shorty Awards

Iphone Evolution

Entered in Data Visualization


The much-hyped launch of the iPhone 6 and 6 Plus saw Apple fans camping out for days to be the first to get their hands on the latest handsets from the tech giant. Amid this Fanbois frenzy, gadget insurer Protect Your Bubble decided to look back at the evolution of the iPhone from its very beginnings in 2007 as the iPhone 2G, to the phablet-sized iPhone 6 Plus. The through-the-ages timeline we created offers a fascinating look at how this iconic product has developed over the years. Interestingly, our design used pure CSS to create this interactive graphic.

"CSS has evolved to include more and more capabilities," explains developer Stephen Griffin. "These now include the ability to apply rounded corners, create colour gradients, and in modern browsers such as Chrome and Firefox, the ability to rotate, scale and even add blurs and other filter effects.

"The iPhone timeline piece makes use of these CSS features to create illustrations made purely of code. No images were used to recreate each iPhone, just empty HTML elements that have been styled purely with CSS."

He continues: "Another recent addition to the CSS spec is the ability to animate between different CSS states. By setting a uniform animation speed between states of all HTML elements we have managed to create the illusion that the iPhones morph between incarnations as the user navigates through the piece."

We think the scrolling effects are beautiful. Take a look at the timeline for yourself.

Strategy and Execution

It makes the most of available technologies to create an interactive, useful and beautifully-designed product.

It's a fabulous example of what can be done with pure code and it shows how far CSS has come since its inception in the 1990s when its functionality was limited to changing the colour of text, adding borders and controlling margins and padding.

This graphic was well received doubling our social reach shortly after launch


Entrant Company / Organization Name

Protect Your Bubble


Entry Credits