Saltar al contenido

8 fragmentos de CSS y JavaScript para crear elementos dibujados a mano

8 fragmentos de CSS y JavaScript para crear elementos dibujados a mano

A menudo vemos código que se utiliza para crear elementos de diseño de alta tecnología. Esto tiene sentido ya que existe una correlación natural entre las últimas técnicas de CSS / JavaScript y una visión futurista. Pero, ¿y si quisiéramos crear algo con un aspecto más tradicional y dibujado a mano?

Resulta que puedes lograr cosas bastante sorprendentes cuando combinas código y elementos dibujados a mano. Por ejemplo, puede utilizar la animación SVG para hacer que el elemento aparezca «dibujado» en tiempo real. O puede agregar un toque de boceto a algo más moderno. El cielo es el limite.

Hoy te mostraremos algunos ejemplos de cómo los elementos dibujados a mano (auténticos o simulados) pueden mejorarse mediante código. ¡Disfrutar!

Observación de multitudes por Szenia Zadvornykh

Ver esta animación es una reminiscencia de estar sentado en un banco en medio de una ciudad abarrotada. Varios personajes extravagantes corren a un ritmo saludable. El uso de JavaScript convierte esta colección de ilustraciones en una obra de arte conmovedora.

Ver la pluma Simulador de multitudes por Szenia Zadvornykh

Excelente flujo de Daniel

Los campos de flujo son un tipo de generativo, arte basado en cuadrículas que permite algunas creaciones asombrosas. Un trabajo muy detallado que parece como si alguien hubiera pasado horas dibujando cada trazo a mano. Este fragmento incluye un panel de control que puede usar para modificar el color de fondo, la velocidad y más.

Ver la pluma Dibujo de campo de flujo de Daniel

Bocetos no tan inútiles por Sarah Drasner

Aquí hay un divertido dibujo animado que usa objetos cotidianos para deletrear la palabra «inútil». Es un poco engañoso, ya que este fragmento es un gran ejemplo de cómo se puede utilizar la biblioteca GSAP para mejorar los gráficos.

Ver la pluma Un homenaje a la web inútil por Sarah Drasner

Menú de pizarra por Josetxu

Si tiene una cafetería o cafetería favorita, probablemente ya haya sido testigo de la elegancia informal de una tarjeta de mesa. A veces un poco caótico, pero siempre lleno de cosas buenas. Este recorte agrega un encanto similar a su pantalla, completo con fuentes dibujadas a mano y bordes originales.

Ver la pluma Disposición del menú del café por Josetxu

Escribe tu nombre con estilo Craig Roblewsky

Las animaciones de texto escrito a mano son uno de los usos más populares para agregar carácter a un diseño. Esta herramienta lo hace aún más divertido al agregar un ícono de mano (que se puede apagar) junto con una serie de configuraciones para modificar.

Ver la pluma Escritura a mano animada con DrawSVG (GSAP3) por Craig Roblewsky

Un mural en movimiento por ilithya

Este mural virtual es como un Submarino amarillo Dibujos animados para la edad moderna. Con colores brillantes y animaciones suaves, definitivamente llama la atención. Lo que es aún más impresionante es que se hizo con CSS puro.

Ver la pluma Mural multipantalla para JSConf EU 2019 por ilithya

Dibujado a mano 404 por Sarah Frisk

Como demuestra este fragmento, no hay nada de malo en divertirse un poco en su página 404. Un personaje alienígena tonto se dibuja con trazos de lápiz de colores. A partir de ahí, tiene una animación CSS entrecortada que le da un toque un poco casero.

Ver la pluma 404: jugador no encontrado por Sarah Frisk

Dibuja tu mismo por Gemma Stiles

Nada dice «dibujado a mano» como Etch a Sketch. Domina los botones poco ortodoxos del juguete clásico y podrás dibujar algo increíble. Aquí una versión en línea funciona con las teclas de flecha de su teclado. Ah, y en lugar de temblar, presionarás el botón «BORRAR» para comenzar de nuevo. Incluso si no eres un gran artista, deberías poder crear divertidas letras de imprenta.

Ver la pluma Grabar un boceto 🖌 por Gemma Stiles

Dos formas de arte diferentes se unen

Ya sea que esté interesado en dibujar, programar o ambos, usted es un artista. Después de todo, existen formas interesantes de expresar su creatividad.

Y aunque estas dos formas de arte requieren habilidades muy diferentes, van bastante bien juntas. Los extractos anteriores son una prueba de que el código puede agregar una nueva dimensión a los elementos dibujados a mano. El movimiento, la interactividad y otros efectos especiales mejoran la experiencia.

¿Le gustaría profundizar en la intersección de los elementos dibujados a mano y el código? Echa un vistazo a nuestro Colección CodePen para más.

Source link