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.
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
