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 código CSS (y algo de HTML para poder mostrar el resultado, por supuesto).
Al igual que ocurre con las vectoriales, la forma de crear una imagen CSS se basa en ir separando y superponiendo cada capa de la misma. Por supuesto, cuanto mayor es el realismo buscando en el resultado, mayor número de capas hay que crear para no simplificar en exceso las formas y colores.
Eso, en el caso del CSS, exige lo siguiente:
- Un campo ‘div’ para cada capa.
- Una clase CSS asignada a cada ‘div’.
- Clases CSS complementarias que definan los estilos a aplicar al citado ‘div’.
Esto se puede hacer directamente tecleando código CSS y HTML en un editor de texto, o bien recurriendo a los múltiples frameworks y herramientas de desarrollo web disponibles en el mercado.
Cómo vectorizar una imagen
Y es que el CSS no permite sólo crear formas geométricas y colores, también degradados… y sombras. Y las sombras pueden resultar fundamentales a la hora de dotar de volumen (y, por tanto, de realismo) a una imagen antes plana. La diferencia, como se observa en la siguiente es notable; y para lograrlas basta con utilizar las propiedades ‘text-shadow’ y ‘box-shadow’ del estándar CSS:
Lo anterior forma parte de otro ejemplo magnífico de Game Boy creada íntegramente con CSS, sólo que esta incluye sus propios juegos desarrollados con JavaScript:
Check out this CSS art of a Gameboy I made with a small peculiarity, it’s actually playable 🕹
Link 👉 https://t.co/NhuY6SguLvWhat’s your highest score? Mine is 90…almost 💯
Use your keyboard if you’re on a laptop
Made with the #angular game engine & #javascript #html #css pic.twitter.com/oavVNkAsqV— Mustapha Aouas (@TheAngularGuy) November 25, 2021
Una vez que has entendido eso, quizá quieras pasarte por el canal de YouTube de Manz, donde nos muestra un ‘paso a paso’ cómo crear una Game Boy con CSS:
–
La noticia
Esta foto de una Game Boy… no es una foto: es puro código CSS
fue publicada originalmente en
Genbeta
por
Marcos Merino
.