9

En la web hay ejemplos de imágenes muy complicadas hechas exclusivamente con css, como por ejemplo la Mona Lisa en CSS.

Obviamente, debieron de usar algún algoritmo para generarlas.

Me gustaría saber cómo lo logran y si es posible que el css generado sea totalmente portable entre los navegadores más comunes.

4
  • Al parecer lo hizo con box-shadow pero creo que no es lo mas optimo. Commented el 2 dic. 2015 a las 16:51
  • En ese caso no es muy complejo es cuestión de leer secuencialmente cada pixel y asociarlo con cada linea de tipo 0px 0px 4px 5px #color Commented el 2 dic. 2015 a las 16:54
  • Osea que están haciendo procesameinto de imágen leyendo píxel por píxel y convirtiendo el color a rgba? Commented el 2 dic. 2015 a las 16:57
  • Hace algunos años me parecía interesante saber lo que se podría crear con .css, actualmente existen convertidores para realizar esto automáticamente codepen.io/blazeeboy/pen/bCaLE
    – Jorgesys
    Commented el 2 dic. 2015 a las 17:06

2 respuestas 2

6

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.)

-3

Aunque no sea exactamente lo mismo, tienes las "imágenes embebidas en css" (en formato base64), no es exactamente una conversión pero sirve como técnica para incluir las imágenes en el propio fichero css. Explicación más detallada de su uso: http://librosweb.es/libro/css_avanzado/capitulo_6.html

1
  • cuando postees links asegurate de incluir la informacion mas relevante por si en algun momento dejan de estar disponibles Commented el 3 dic. 2015 a las 9:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.