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
— Manz 🇮🇨⚡👾 (@Manz) January 26, 2023
➡ Derecha: Código CSS (sin usar imágenes)
🤯¿Qué te parece?
<👇> Links en el siguiente tweet pic.twitter.com/z6aLLp9O5U
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.
Créditos: Miguel Mangialardi
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.
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:
Créditos: Mustapha Aouas
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 🕹
— Mustapha Aouas (@TheAngularGuy) November 25, 2021
Link 👉 https://t.co/NhuY6SguLv
What'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
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:
Ver 2 comentarios