Este artículo está encabezado por la imagen de una Nintendo Game Boy... cuya única peculiaridad es que, antes de que hiciéramos la pertinente captura, no era una imagen ni por asomo: sólo el resultado de utilizar código CSS (siglas de 'hojas de estilo de cascada') en una página web.

La imagen en cuestión es una creación del desarrollador y streamer español 'Manz', que la publicó ayer en Twitter acompañado de sendos enlaces a una demo visual y al correspondiente repositorio de código. Te animamos a entrar en el primero e intentar hacer clic con el botón derecho sobre la 'imagen'... ¡A ver si eres capaz de lograr que aparezca aquello de 'Guardar imagen como'!
⬅ Izquierda: La fotografía original➡ Derecha: Código CSS (sin usar imágenes)🤯¿Qué te parece?<👇> Links en el siguiente tweet pic.twitter.com/z6aLLp9O5U— Manz 🇮🇨⚡👾 (@Manz) January 26, 2023

Y si no sólo te has quedado boquiabierto con el truco, sino que te pica la curiosidad sobre cómo es posible hacer algo así, sigue leyendo (claro que, si por el contrario, ya tienes una idea básica de cómo hacerlo, revisar el enlace a GitHub te mostrará las herramientas y recursos usados por Manz para lograrlo).

Una explicación rápida

Crear una imagen usando únicamente tecnología CSS se diferencia poco o nada de la creación de un gráfico vectorial (esas imágenes que puedes ampliar indefinidamente sin que se pixelen); lo que ocurre es que, en lugar de usar para ello un software de ilustración vectorial como Adobe Illustrator usamos una dosis generosa de …