IslaVisual
Ultima revisión 10/10/2012
Dibujar con box-shadow de CSS3
Hace tiempo, cuando empezó a nacer el CSS3, vi una imagen de la Mona Lisa y pensé que era un archivo JPEG, pero no. Era un estilo CSS3 y, como no podía ser de otra manera, me quedé sorprendido de la calidad de la imagen frente a mis ojos.
Me puse a investigar y, al poco tiempo, vi que estaba realizado con box-shadow. Entoces me puse a pensar en las posibilidades que podía contemplar sólo con una propiedad CSS3.
La técnica es muy sencilla. Basta con ir creando una sombra de un color determinado pixel por pixel. Como box-shadow permite introducir todas las sombras que quieras, con el esfuerzo que ello requiere, podemos dibujar todo lo que nuestra mente sea capaz de imaginar. Incluso hacer dibujos con calidad fotográfica.
El peso de la imagen, bueno, no es que sea una ventaja pero es una técnica interesante.
Sobre el uso Cross Browsing, con los hacks adecuados, podría funcionar en el 90% de los navegadores o más.
Pero amigos, eso sí, el render de estas imágenes es muy lento y eso es un contra que no podemos ignorar si queremos llevarlo a una web se uso colectivo.
A continuación os dejo unos enlaces para que veáis la potencia de box-shadow aunque no sea recomendable usarlo para estos fines.
Otras diseños interesantes
Aprovecho esta estrada en el blog para mostraros, además, algunas cositas hechas en CSS3 muy interesantes.
- Control de Volumen con selector y movimiento.
- Árbol de cuento.
- Menú animado de Social Media.
- Braking Bad con animación de humo.
- Experimento visual con canvas.
- Logo de Google Chrome creado en CSS3 con un solo elemento div.
- Rotación de partículas.
- Experimento con animaciones.
