Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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.


Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.