På nuværende tidspunkt har de fleste Apple-fans deres hænder på en iPhone 6, og de ser ganske utrolige ud - selvom Apple har tilfældigt introduceret buede skærme.
IPhone er et vidunderligt eksempel på iterativ design; hver model er en udvikling snarere end en revolution, og de bygger alle på det tidligere design. Når man kigger på den originale iPhone, ser den ikke meget ud som iPhone 6, men ser på en model efter den anden, og man kan næsten følge designprocessen, da en raffinement følger en anden.
Denne historie gør iPhone til et køligt emne for vektorovergange, og hvilken bedre måde at opnå det end med CSS? Indtast denne utrolige rene CSS - ingen billeder blev brugt overhovedet - Interaktiv animation af iPhone-historien. Bare rul gennem modellerne en efter en og se den smukke animation.
Hele projektet blev bygget af Stephen Griffin på vegne af Beskyt din boble, der klart elsker sit udvalgte medium:
I løbet af årene har CSS udviklet sig til at omfatte flere og flere kapaciteter, som nu omfatter evnen til at anvende afrundede hjørner, skabe farvegradienter og i moderne browsere som Chrome og Firefox, evnen til at rotere, skala og endda tilføje blurs og andre filtereffekter .
IPhone-tidslinjen gør brug af disse CSS-funktioner til at skabe illustrationer, der kun er lavet af kode. Ingen billeder blev brugt til at genskabe hver iPhone, bare tomme HTML-elementer, der er blevet stylet rent med CSS.