En este caso concreto se utiliza box-shadow
para dibujar cada píxel como una pequeña sombra coloreada y posicionada de forma adecuada para formar la imagen resultante.
Este truco se aprovecha de lo siguiente:
- Se pueden definir múltiples sombras para un único elemento
- Cada sombra puede colorearse individualmente con cualquier color
- Cada sombra puede posicionarse individualmente con respecto al elemento original.
Respecto al algoritmo para generarlo, bastaría con recorrer la imagen píxel a píxel y convertir cada uno de ellos a una línea nueva de box-shadow
, modificando color y posición. Para comprobarlo bastaría con leer el código que aparece enlazado en el ejemplo de tu pregunta, con el que ha sido supuestamente generado: https://github.com/jaysalvat/image2css
Cabe destacar de que, más allá del valor artístico y de la sorpresa inicial de que algo así se pueda hacer, esta técnica no tiene ningún valor real, puesto que cada pixel de la imagen se codifica con un mínimo de 24 bytes, un orden de magnitud mayor que cualquier codificación eficiente de imágenes (JPEG, BMP, WebP, etc.)