Nå har de fleste Apple-fans hendene på en iPhone 6, og de ser ganske utrolige ut - selv om Apple har det Tilfeldigvis introduserte buede skjermer.

IPhone er et fantastisk eksempel på iterativ design; hver modell er en utvikling snarere enn en revolusjon, og de bygger alle på den forrige designen. Ser på den opprinnelige iPhone, det ser ikke ut som iPhone 6, men ser på en modell etter den andre, og du kan nesten følge designprosessen ettersom en raffinement følger en annen.

Den historien gjør iPhone til et kjølig emne for vektoroverganger, og hvilken bedre måte å oppnå det enn med CSS? Skriv inn denne utrolig rene CSS - ingen bilder ble brukt i det hele tatt - Interaktiv animasjon av iPhone-historien. Bare bla gjennom modellene en etter en og se den vakre animasjonen.

Hele prosjektet ble bygd av Stephen Griffin på vegne av Beskytt din boble, som klart elsker sitt valgte medium:

Gjennom årene har CSS utviklet seg til å inkludere flere og flere funksjoner som nå inkluderer muligheten til å bruke avrundede hjørner, lage fargegradienter, og i moderne nettlesere som Chrome og Firefox, muligheten til å rotere, skala og til og med legge uklare og andre filtereffekter .
IPhone-tidslinjen gjør bruk av disse CSS-funksjonene for å lage illustrasjoner laget bare av kode. Ingen bilder ble brukt til å gjenskape hver iPhone, bare tomme HTML-elementer som er utformet rent med CSS.