Inmiddels hebben de meeste Apple-fans een iPhone 6 in handen, en ze zien er ongelooflijk uit, zelfs als Apple dat heeft gedaan per ongeluk geïntroduceerde gebogen schermen.
De iPhone is een prachtig voorbeeld van een iteratief ontwerp; elk model is eerder een evolutie dan een revolutie en ze bouwen allemaal op het vorige ontwerp. Als je naar de originele iPhone kijkt, lijkt hij niet veel op de iPhone 6, maar kijk je naar het ene model na het andere en kun je het ontwerpproces bijna volgen omdat de ene verfijning de andere volgt.
Die geschiedenis maakt de iPhone een cool onderwerp voor vectorovergangen en wat is een betere manier om dat te bereiken dan met CSS? Voer deze ongelooflijke zuivere CSS in - er werden helemaal geen afbeeldingen gebruikt - interactieve animatie van de geschiedenis van de iPhone. Blader gewoon één voor één door de modellen en bekijk de prachtige animatie.
Het hele project is gebouwd door Stephen Griffin namens Bescherm je bubbel, die duidelijk houdt van zijn gekozen medium:
In de loop der jaren is CSS geëvolueerd om steeds meer mogelijkheden te bieden die nu de mogelijkheid bieden om afgeronde hoeken toe te passen, kleurovergangen te maken en in moderne browsers zoals Chrome en Firefox, de mogelijkheid om vervaagt en andere filtereffecten te roteren, te schalen en zelfs toe te voegen .
Het tijdbalkstuk van de iPhone maakt gebruik van deze CSS-functies om illustraties te maken die uitsluitend op code zijn gemaakt. Er werden geen afbeeldingen gebruikt om elke iPhone opnieuw te maken, alleen lege HTML-elementen die uitsluitend met CSS zijn gestileerd.