How the iPhone has evolved in pure CSS

Take a look at the evolution of Apple's most popular product via these pure CSS, cleverly scrolling images.

iPhone timeline

Do you have a favourite iPhone model?

With the recent announcement of the iPhone 6, Apple and tech fans are in a flurry to get their hands on the first batch. With all this excitement in the air, insurance company Protect Your Bubble decided to take this look back at the evolution of the iPhone from its very beginnings back in 2007. (Yes, you have to view an ad first to see it but we think it's definitely worth the wait.)

Including every model from the iPhone 2G to the iPhone 6, the timeline offers a fascinating look at how the product has developed over the years. And it highlights another big chance over that period too - the way you can now use pure CSS to create web images.

"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." We think the scrolling effects are beautiful – take a look at the timeline for yourself.

iPhone timeline

iPhone timeline

iPhone timeline

Which iPhone was your favourite? Share your memories in the comments box below!


A founder member of the Creative Bloq team, Sammy Maine is now a freelance journalist. She also thinks that Buffy the Vampire Slayer is probably the best television series ever created.