Lata de Coca Cola con scroll y efecto 3D con CSS

3 comentaron

Esto es un ejemplo de las maravillas que se pueden hacer con los estilos CSS. El diseñador Roman Cortes explica como realizo este efecto: "Con una combinación de las propiedades CSS1 background-attachment y background-position, se pueden crear mapas de desplazamiento y, mediante barras de scroll, estos mapas pueden moverse y aplicarse a diferentes partes de una textura (una imagen de fondo). Con los mapas de desplazamientos se pueden hacer una gran cantidad de efectos interesantes, pero la complejidad del mapa afecta directamente al tamaño del código HTML y CSS. Encontrar un ejemplo apropiado cuya tamaño de código no fuese muy grande pero que produjese un efecto interesante me llevó algo de tiempo. Tras pensar en reflejos de olas, distorsiones submarinas, efecto lupa, la Tierra rotando, finalmente encontré el mejor ejemplo justo encima de mi mesa: una lata de Cola-Cola (mi bebida favorita). Debido a la forma cilíndrica de la lata, el mapa de desplazamiento es sencillo con la proyección paralela que hice en el ejemplo, y por tanto el código es muy pequeño (menos de 5kb)."


Mueve la barra de desplazamiento para ver el efecto.