Saltar al contenido

Dibujar patrones personalizados en CSS con el componente web CSS-Doodle

CSS Doodle webapp

Con un nombre como CSS Doodle, es posible que no sepa qué esperar.

Pero este es un componente web realmente genial que te permite crear cosas increíbles. Funciona en el DOM de sombra y le permite personalizar diferentes formas, figuras y patrones con CSS.

10 herramientas de animación CSS3 que debe marcar

10 herramientas de animación CSS3 que debe marcar

Como las personas tienden a percibir más fácilmente las cosas que se mueven, las animaciones utilizadas de manera inteligente pueden mejorar la experiencia del usuario … Lee mas

Esto también funciona con transformaciones 2D que son propiedades CSS3 muy poderosas cuando se usan correctamente. Esto hace que CSS Doodle sea uno de los componentes web más geniales y estéticamente agradables de Internet.

Aplicación web CSS Doodle

Para comenzar, simplemente agregue el script principal en el encabezado de su página. También hay instrucciones en el sitio web de CSS Doodle para ayudarlo a comenzar a trabajar.

Tiene una sintaxis bastante loca que encontrará más abajo en la página principal.

Esto se basa en varios selectores personalizados que se definen dentro del archivo JS. Entonces, cuando escribes código CSS Doodle, se está analizando a través de JavaScript, aunque no es necesario que conozca ningún JS usted mismo.

Aquí hay un fragmento de muestra de la página principal que muestra un simple Doodle de CSS.


  :doodle {
    @grid: 11 / 100vmax;
    background: #0a0c27;
  }
  --n: calc(
      @abs(@abs(@row() - 6)
    + @abs(@col() - 6) - 11) / 11
  );
  margin: -10%;
  transform: rotate(45deg);
  border: 1px solid;
  border-color: hsla(
    calc(var(--n) * 360 + 120), 60%, 68%,
    var(--n)
  );

Puede diseñar sus patrones con cuadrículas, paneles personalizados dentro de una cuadrícula o con configuraciones aleatorias. Además, tiene toneladas de formas prediseñadas que puede agregar a sus diseños geométricos.

Todo es muy fácil de editar y es realmente entretenido.

Consulte este ejemplo de CodePen para ver solo una demostración básica:

Si desea ver más, hay una colección completa en CodePen para navegar.

O puede profundizar en el repositorio principal de GitHub si tiene curiosidad acerca de las diferentes configuraciones, selectores o estilos de animación.

Quizás no sea el componente web más práctico, pero es una biblioteca divertida para trabajar.