Román Cortés

Pure CSS Coke Can

25 de Enero del 2010


(versión en castellano abajo)

After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image).

With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can - my favourite drink.

Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little - below 5kb - and easy to understand I hope.

Even if this effect is mainly CSS1 and some bits of CSS2 - for the scrolling div, overflow: auto property -, it is not going to work in IE6, because it doesn’t support background-attachment: fixed. I’ve tested it and it works in IE8, Firefox 3.5, Chrome 3, Safari 4 and Opera 10. Also, the code validates.

Castellano

Tras crear mi anterior efecto (post anterior a este), describí que 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) y fácil de entender (espero).

Pese a que el ejemplo funciona principalmente con CSS1 (y overflow: auto de CSS2), no funcionará en IE6; no soporta la propiedad background-attachment: fixed. Lo he probado en los navegadores actuales y funciona correctamente, y el código valida.

Etiquetas

264 Comentarios RSS

Comentar