À l’heure actuelle, la plupart des fans d’Apple utilisent l’iPhone 6, et ils semblent vraiment incroyables - même si Apple a écrans accidentellement introduits.
L'iPhone est un merveilleux exemple de conception itérative; chaque modèle est une évolution plutôt qu'une révolution et ils s'appuient tous sur la conception précédente. En regardant l'iPhone d'origine, il ne ressemble pas beaucoup à l'iPhone 6, mais regardez un modèle après l'autre et vous pouvez presque suivre le processus de conception car un raffinement en suit un autre.
Cette histoire fait de l'iPhone un sujet intéressant pour les transitions vectorielles, et quel meilleur moyen d'y parvenir qu'avec CSS? Entrez cet incroyable CSS pur - aucune image n'a été utilisée du tout - animation interactive de l'histoire de l'iPhone. Faites défiler les modèles un par un et regardez la belle animation.
Le projet entier a été construit par Stephen Griffin pour le compte de Protégez votre bulle, qui aime clairement le médium choisi:
Au fil des années, le CSS a évolué pour inclure de plus en plus de fonctionnalités qui incluent désormais la possibilité d'appliquer des coins arrondis, de créer des dégradés de couleurs et, dans les navigateurs modernes tels que Chrome et Firefox, de faire pivoter, .
La ligne de temps de l'iPhone utilise ces fonctionnalités CSS pour créer des illustrations faites uniquement de code. Aucune image n'a été utilisée pour recréer chaque iPhone, juste des éléments HTML vides qui ont été stylisés uniquement avec CSS.