Por fin pude (es decir, tuve tiempo y ganas de ponerme a) reparar mi computadora, y nuevamente puedo trabajar en mis cosas de desarrollo y diseño. Para celebrarlo, me metí un poco a aprender sobre dibujo CSS, es decir, gráficos creados utilizando únicamente elementos de HTML y CSS, y si acaso algo de JavaScript. Como vemos, se trata solo de componentes básicos del diseño web, sin hacer uso de frameworks ni algún otro lenguaje de programación.
Mientras que los recursos pueden ser limitados, con algo de creatividad e imaginación se pueden lograr enormes resultados. Como muestra basta este retrato hecho completamente de HTML/CSS, por Diana A. Smith. Pero lo que he logrado yo hasta ahora han sido dibujos básicos y muy sencillos, pero bueno, por algo se empieza.
Aquí algo de lo que he hecho hasta ahora:
Pizza CSS
See the Pen CSS Pizza by Gibran Jacobo (@skom612) on CodePen.
Había comenzado haciendo un autorretrato (obviamente con formas básicas solamente…) pero luego me empezó a dar hambre y terminé haciendo una rebanada de pizza, que tiene cara por alguna razón. Las formas aún son algo burdas y no es del todo estética pero ahí se ve poco a poco la intención.
Teléfono CSS
See the Pen CSS Phone by Gibran Jacobo (@skom612) on CodePen.
Luego vi mi teléfono y dije «Mmm… formas básicas…» así que alguno que otro rectángulo después ahí estaba un dibujo algo sencillo de mi teléfono. Creo que lo más «complicado» fueron los botones de recientes (a la izquierda) y volver (a la derecha); que están compuestos de varias formas sobrepuestas para dar el efecto deseado, jugando con sus propiedades, como puede verse en el código utilizado.
Hongo CSS
See the Pen CSS Mushroom by Gibran Jacobo (@skom612) on CodePen.
Y finalmente, necesitaba algo más ambicioso. Por alguna razón pensé en un hongo; dibujarlo no fue gran problema, pero quería animarlo como si estuviera respirando (ya sé que no tiene sentido) para que no se viera tan estático. Luego pensé, ¿por qué no mejor que esté roncando? Así que luego de jugar un poco con la animación — que es algo más sencillo de lo que parece — ahí estaba un pequeño hongo claramente respirando y durmiendo. Luego agregué un poco más de detalle con las «Z’s» que aparecen, se mueven un poco, y desaparecen. El paso final fue agregar las estrellas, pero para no hacerlo manualmente, decidí usar una sencilla función de JavaScript para generarlas aleatoriamente. Cada vez que se ejecute el proyecto (haciendo clic en el botón Rerun) aparecerá un número diferente de estrellas en diferente posición.
Y eso es lo que he hecho hasta el momento, voy a seguir trabajando en más diseños así e incluso implementarlos en algún diseño de un sitio terminado, y así mismo los estaré agregando en mi Portafolio.
¿Qué les parecen? ¿Tienen alguna otra idea de qué pudiera dibujar y animar? Recuerden dejar sus comentarios. ¡Hasta la próxima!