Hittills har de flesta Apple-fans händerna på en iPhone 6, och de ser ganska otroligt ut - även om Apple har av misstag introducerade böjda skärmar.

IPhone är ett underbart exempel på iterativ design; varje modell är en utveckling snarare än en revolution, och de bygger alla på den tidigare designen. Titta på den ursprungliga iPhone ser den inte ut som iPhone 6, men tittar på en modell efter den andra och du kan nästan följa designprocessen som en förfining följer en annan.

Den historien gör iPhone till ett coolt ämne för vektorövergångar, och vilket bättre sätt att uppnå det än med CSS? Ange denna otroliga rena CSS - inga bilder användes alls - Interaktiv animering av iPhone-historiken. Bläddra bara igenom modellerna en efter en och titta på den vackra animationen.

Hela projektet byggdes av Stephen Griffin på uppdrag av Skydda din bubbla, som tydligt älskar sitt utvalda medium:

Under åren har CSS utvecklats för att inkludera fler och fler funktioner, som nu inkluderar möjligheten att tillämpa avrundade hörn, skapa färggraderingar och i moderna webbläsare som Chrome och Firefox, möjligheten att rotera, skala och till och med lägga oskärpa och andra filtereffekter .
IPhone-tidslinjen använder sig av dessa CSS-funktioner för att skapa illustrationer som är renade av kod. Inga bilder användes för att återskapa varje iPhone, bara tomma HTML-element som har stylats rent med CSS.