Ormai, la maggior parte dei fan Apple ha le mani su un iPhone 6, e sembrano davvero incredibili - anche se Apple lo ha schermi curvi introdotti accidentalmente.
L'iPhone è un meraviglioso esempio di design iterativo; ogni modello è un'evoluzione piuttosto che una rivoluzione e tutti si basano sul progetto precedente. Guardando l'iPhone originale, non assomiglia molto all'iPhone 6, ma guarda un modello dopo l'altro e puoi quasi seguire il processo di progettazione mentre un raffinamento segue un altro.
Quella storia rende l'iPhone un argomento interessante per le transizioni dei vettori, e quale modo migliore per ottenerlo rispetto ai CSS? Entra in questo incredibile CSS puro - nessuna immagine è stata utilizzata - animazione interattiva della storia di iPhone. Basta scorrere i modelli uno a uno e guardare la bella animazione.
L'intero progetto è stato costruito da Stephen Griffin per conto di Proteggi la tua bolla, chi ama chiaramente il suo medium scelto:
Nel corso degli anni il CSS si è evoluto per includere sempre più funzionalità che ora includono la possibilità di applicare angoli arrotondati, creare sfumature di colore e nei browser moderni come Chrome e Firefox, la capacità di ruotare, ridimensionare e persino aggiungere sfocature e altri effetti filtro .
Il pezzo timeline di iPhone utilizza queste funzionalità CSS per creare illustrazioni fatte esclusivamente di codice. Nessuna immagine è stata utilizzata per ricreare ogni iPhone, basta svuotare gli elementi HTML che sono stati progettati esclusivamente con CSS.