Pure CSS Arcade Machine 🕹️
Tengo algo especial para compartir contigo. Por un momento, deja a un lado las herramientas gráficas y las técnicas de dibujo modernas. Acompáñame, vamos a retroceder en el tiempo y dar un paseo por los pasillos de las salas de juegos de los años 80. ¿Lo mejor? Todo esto es posible gracias a nuestro querido y versátil lenguaje: CSS. ✨
En esta aventura, he creado nada más y nada menos que una máquina de arcade, completamente elaborada con CSS. Cada pixel, cada matiz de color y cada minúscula animación se ha construido desde cero usando solo CSS. Creéme, no hay imágenes ni SVGs. ¡Solo CSS! 🤯
No te voy a engañar, este proyecto no ha sido una tarea sencilla, estuvimos unas 25h en directo en Twitch. Requiere un conocimiento profundo de CSS, un poco de paciencia y una cantidad significativa de tiempo y esfuerzo.
Pero, si te atreves a intentarlo, te aseguro que aprenderás mucho y te divertirás aún más.
No se trata solo de las horas dedicadas a este proyecto, sino también de la innovación y la creatividad necesarias para superar los retos y solucionar los problemas. Además, en comunidad es mucho más divertido. ✨
Aunque el camino no fue fácil, el resultado final fue muy satisfactorio. ¡Mira cómo se ve la máquina arcade en acción!
Enlaces de interés
- Código fuente en Codepen de la máquina arcade CSS
- Publicación en Instagram: https://www.instagram.com/p/CQ9Z3Y7o9Zo/
- Ilustración original en Dribbble: https://dribbble.com/shots/3394419-Pacman/
¿Por qué hago dibujos con CSS?
Si quieres saber por qué hago dibujos con CSS, te lo explico en este artículo.
Editado el 11 de Julio, 2023