Marketing

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

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

A menudo vemos código utilizado 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 dibujado a mano?

Resulta que puedes lograr cosas increíbles combinando código y elementos dibujados a mano. Por ejemplo, puede utilizar la animación SVG para que parezca que el elemento se está “dibujando” en tiempo real. O puede agregar un toque de boceto a algo más moderno. El cielo es el límite.

Hoy, le mostraremos algunos ejemplos de cómo los elementos dibujados a mano (auténticos o simulados) se pueden mejorar a través del código. ¡Aprovechar!

multitud mirando por Szenia Zadvornykh

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

Vea el simulador de multitud de plumas de Szenia Zadvornykh

Excelente flujo por Daniel

Los campos de flujo son una especie de arte generativo basado en cuadrículas que permite algunas creaciones impresionantes. Trabajo muy detallado que parece como si alguien hubiera pasado horas dibujando cada trazo a mano. Este fragmento presenta un panel de control que le permite ajustar el color de fondo, la velocidad y más.

Vea el dibujo del campo de flujo de la pluma de Daniel

Bocetos no tan inútiles por Sarah Drasner

Aquí hay una caricatura divertida que usa objetos cotidianos para deletrear la palabra “inútil”. Es un nombre un poco inapropiado, ya que este fragmento es un gran ejemplo de cómo se puede usar la biblioteca GSAP para mejorar el arte.

Ver la pluma Un tributo a la web inútil, de Sarah Drasner

menú de pizarra por Josetxu

Si tiene una cafetería o cafetería favorita, es probable que haya sido testigo de la elegancia informal de un menú de pizarra. A veces un poco desordenado, pero siempre lleno de cosas buenas. Este fragmento aporta un encanto similar a su pantalla, completo con fuentes dibujadas a mano y bordes originales.

LEER  4.- Curso Flask - Rutas y Parámetros

Ver diseño de menú de Pen Cafe por Josetxu

escribe tu nombre con estilo Craig Roblewsky

Las animaciones de texto escrito a mano se encuentran entre los casos de uso más populares para agregar caracteres 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.

Vea la escritura a mano animada con lápiz de Craig Roblewsky con DrawSVG (GSAP3)

Un mural en movimiento por ilithya

Este mural virtual es como una caricatura de Yellow Submarine para la era moderna. Con colores brillantes y animaciones suaves, definitivamente es un truco. Aún más impresionante es que está construido con CSS puro.

Vea el mural de lápiz multipantalla para JSConf EU 2019 de 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 extraterrestre tonto se dibuja con trazos parecidos a crayones. A partir de ahí, presenta una animada animación CSS que aporta un toque hogareño.

Vea el bolígrafo 404: jugadores no encontrados por Sarah Frisk

Dibujate 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 asombroso. Aquí, una versión en línea funciona usando las teclas de flecha del teclado. Ah, y presionarás el botón “BORRAR” en lugar de girar para empezar de nuevo. Incluso si no eres un gran artista, deberías poder crear divertidas letras mayúsculas.

Vea el Pen Etch A Sketch 🖌 de Gemma Stiles

Dos formas de arte diversas que se unen

Ya sea que te guste dibujar, programar o ambos, eres un artista. Después de todo, cada uno le permite expresar su creatividad de formas emocionantes.

Y aunque estas dos formas de arte requieren conjuntos de habilidades muy diferentes, combinan muy bien. Los fragmentos anteriores son una prueba de que el código puede aportar una nueva dimensión a los elementos dibujados a mano. El movimiento, la interactividad y otros efectos especiales funcionan para mejorar la experiencia.

¿Quieres profundizar en la intersección de códigos y elementos dibujados a mano? Consulte nuestra colección CodePen para obtener más información.

Por favor califica el contenido

/ 5

Your page rank:

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.

¿Te gusta nuestro contenido?Recibe noticias y estrategias digitales a tu correo.

No pierda la oportunidad de recibir también descuentos de nuestros servicios.