Até agora, a maioria dos fãs da Apple tem as mãos em um iPhone 6, e eles parecem muito incríveis - mesmo que a Apple tenha acidentalmente introduziu telas curvas.
O iPhone é um maravilhoso exemplo de design iterativo; Cada modelo é uma evolução e não uma revolução, e todos eles se baseiam no design anterior. Olhando para o iPhone original, ele não se parece muito com o iPhone 6, mas olhe para um modelo após o outro e você pode quase seguir o processo de design como um refinamento segue o outro.
Essa história faz do iPhone um assunto legal para transições de vetores, e que melhor maneira de conseguir isso do que com CSS? Digite este incrível CSS puro - nenhuma imagem foi usada - animação interativa da história do iPhone. Basta percorrer os modelos um por um e assistir a bela animação.
Todo o projeto foi construído por Stephen Griffin em nome da Proteja sua bolha, que claramente ama seu meio escolhido:
Ao longo dos anos, o CSS evoluiu para incluir mais e mais recursos que agora incluem a capacidade de aplicar cantos arredondados, criar gradientes de cor e, em navegadores modernos como Chrome e Firefox, a capacidade de girar, dimensionar e até mesmo criar borrões e outros efeitos de filtro. .
A peça da linha do tempo do iPhone faz uso desses recursos CSS para criar ilustrações feitas exclusivamente de código. Nenhuma imagem foi usada para recriar cada iPhone, apenas elementos HTML vazios que foram estilizados exclusivamente com CSS.