Por ahora, la mayoría de los fanáticos de Apple tienen en sus manos un iPhone 6, y se ven bastante increíbles, incluso si Apple tiene accidentalmente introdujo pantallas curvas.
El iPhone es un maravilloso ejemplo de diseño iterativo; cada modelo es una evolución en lugar de una revolución, y todos se basan en el diseño anterior. Mirando el iPhone original, no se parece mucho al iPhone 6, pero mira un modelo después del otro y casi puedes seguir el proceso de diseño, ya que un refinamiento sigue al otro.
Esa historia hace que el iPhone sea un tema interesante para las transiciones de vectores, y ¿qué mejor manera de lograr eso que con CSS? Ingrese este increíble CSS puro - no se utilizaron imágenes en absoluto - animación interactiva de la historia del iPhone. Simplemente desplácese por los modelos uno por uno y observe la hermosa animación.
El proyecto completo fue construido por Stephen Griffin en nombre de Protege tu burbuja, quien claramente ama su medio elegido:
Con los años, CSS ha evolucionado para incluir cada vez más capacidades que ahora incluyen la capacidad de aplicar esquinas redondeadas, crear degradados de color y, en navegadores modernos como Chrome y Firefox, la capacidad de rotar, escalar e incluso agregar desenfoques y otros efectos de filtro .
La pieza de la línea de tiempo de iPhone hace uso de estas características de CSS para crear ilustraciones hechas exclusivamente de código. No se usaron imágenes para recrear cada iPhone, solo elementos HTML vacíos que se han diseñado exclusivamente con CSS.