Cómo dibujar patrones con CSS utilizando CSS Doodle

() translation by (you can also view the original English article)

CSS nos ayuda a ser creativos de muchas formas, y hoy llevaremos nuestra creatividad con CSS al siguiente nivel. Vamos a usar una herramienta llamada CSS Doodle para crear algunos patrones repetidos impresionantes.

CSS Doodle es un componente web, y se utiliza como cualquier otra etiqueta HTML (por ejemplo, <css-doodle>). Empezaremos con lo básico, aprenderemos a instalarlo y a usarlo, y luego crearemos cuatro patrones únicos. Revisa el video tutorial, o continúa leyendo la versión escrita para que veas lo que vamos a crear.

Patrones con CSS Doodle

Cómo instalar CSS Doodle

Para empezar con CSS Doodle, dirígete a css-doodle.com. Allí encontrarás ejemplos de código y demostraciones inspiradoras de las cosas que puedes crear con él.

Bajo la sección de la página que dice «Getting Started», verás un enlace a la versión CDN de la biblioteca que tomaremos y colocaremos directamente en CodePen:

1	https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js

Hay un par de opciones más que tal vez prefieras, pero esta es la ruta que tomaremos durante este tutorial.

En realidad, no necesitamos escribir nada de JavaScript, es más, ni siquiera CSS, todo lo que haremos tendrá lugar en el HTML.

Demostración 1

A medida que vayamos creando nuestra primera demostración, trataremos los requisitos básicos de la configuración.

Comienza creando un elemento personalizado <css-doodle>. Este elemento es el objetivo de la biblioteca y los contenidos que añadamos determinarán el patrón generado. Luego agregamos el selector :doodle, al que le podemos añadir varias propiedades.

1	<css-doodle>
2	:doodle {}
3	</css-doodle>

Define una cuadrícula

El siguiente paso es definir una cuadrícula. Podemos hacer esto dentro del selector o como data-attribute en la etiqueta <css-doodle>. Por lo que nuestras opciones son una de las siguientes:

1	<css-doodle grid="5">
2	:doodle {}
3	</css-doodle>

<css-doodle>
    :doodle {
        @grid: 5x5;
    }
</css-doodle>

Vamos a continuar con la última. Observa la notación @ para la sintaxis específica de doodle-. Ahora tenemos que añadir algunos otros valores, como un tamaño total, y un espacio en la cuadrícula:

<css-doodle>
    :doodle {
        @grid: 5x5;
        @size: 10rem;
        grid-gap: 1px;
    }
    background-color: tomato;
</css-doodle>

Nuestra cuadrícula de 5x5 tiene un espacio entre casillas de 1px, tiene un ancho y alto total de 10rem y tiene un fondo de tomato.

Juega con los valores para ver qué obtienes. Por ejemplo, vamos a cambiar el número de casillas y usemos una unidad de medida diferente (vmax) en size para ayudarnos a llenar toda la pantalla (1vmax es igual a una centésima parte del ancho o la altura de la ventana gráfica, dependiendo de cuál sea más grande):

Controlando a CSS Doodle

Todo lo que declaramos dentro del selector :doodle afecta al doodle en su conjunto. Todo lo que declaramos fuera del selector :doodle influye en cada celda individual.

Por ejemplo, puedo utilizar una propiedad de transformación con una función de escala aleatoria, de modo que cada celda se escale aleatoriamente entre los valores .1 y .9:

1	transform: scale(@rand(.1,.9));

Esto es lo que nos da:

Utilizar funciones aleatorias de esta forma es muy útil y nos puede permitir generar todo tipo de patrones. Vamos a aplicar el mismo pensamiento a los colores del formato HSL, usando cifras aleatorias para el tono, la saturación, la luminosidad y los valores alfa (observa el uso de @r() que es una versión abreviada de @rand(), pero hace exactamente lo mismo):

Por qué no añadir aún más caos, aplicando:

translate3d aleatorio
border-radius aleatorio
Alterando el espacio de la cuadrícula

Fijando el patrón como fondo

Un último detalle que aplicaremos son algunos estilos para fijar el patrón y así poder usarlo como un fondo para otros elementos, como en un bloque hero. Para hacerlo, añadimos un nombre de clase adicional al elemento <css-doodle> y aplicamos el siguiente CSS:

1	.doodle {
2	position: fixed;
3	z-index: -1;
4	}

Esta es una excelente forma para crear gráficos con fondos únicos y aleatorios para el hero de un sitio web. ¡Intentalo!

Demostración 2

Empecemos de nuevo y hagamos otro patrón. Primero definiremos la cuadrícula y le daremos a todo un color de fondo

<css-doodle>
    :doodle {
        @grid: 10 / 100vmax;
        grid-gap: 4vmax;
        background: #B2DFDB;
    }
</css-doodle>

A continuación, aplicaremos un color aleatorio a cada celda, una transformación de escala aleatoria, y translate3d aleatorio para alterar la posición de cada celda.

<css-doodle class="doodle">
    :doodle {
        @grid: 10 / 100vmax;
        grid-gap: 4vmax;
        background: #B2DFDB;
    }
	
    transform: scale(@rand(.1, 1.9)) translate3d(@r(150px), @r(200px), 0) rotate(@r(360deg));
    background: hsla(@r(100), 85%, @r(90%, 100%), @r(.9));
</css-doodle>

Aplica una forma básica

Ahora, aquí está la parte genial. CSS Doodle nos brinda acceso a una colección de formas básicas, las cuales se pueden encontrar en la página web de CSS Doodle. Añadiremos la siguiente regla antes de la etiqueta de cierre </css-doodle>:

1	@shape: clover 5;

¡Aquí está el resultado final!

Demostración 3

Para nuestra tercera demostración, vamos a añadir algunos juguetes nuevos a la mezcla. Determinaremos el color de cada celda utilizando la función @pick para elegir de una lista de valores:

1	background: @pick(#29B6F6, #FDD835, #5E35B1, #FFCCBC, #E8EAF6, #B2DFDB, #1B5E20, #2979FF);

Luego, aplicaremos clip-path de CSS “simple”, con coordenadas aleatorias para cada polígono de tres lados:

1	clip-path: polygon(
2	@rand(50%) 0, 50% @rand(70%), 0 @rand(100%)
3	);

Para terminar, utilizaremos algunas animaciones con keyframes de CSS, ¡también con algunos valores aleatorios dispersos! Estas reglas darán un efecto de movimiento continuo.

animation: test infinite @r(100s, 150s) linear;
    
	@keyframes test {
		0% {
			transform: translate3d(0, 0, 0);
		}
		50% {
			transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);
		}
		100% {
			transform: translate3d(0, 0, 0);
		}

¡Revisa el resultado final! Puedes ver más detalles sobre cómo se creó esto en la versión en video en el minuto 15:47.

Demostración 4

Nuestra última demostración utiliza muy poco código, pero empieza con una cuadrícula básica al igual que antes.

<css-doodle>
     :doodle {
		@grid: 25 / 100vmax;
 	}
</css-doodle>     

Después definimos una variable CSS llamada --hue, cuyo valor cambiará dependiendo de la posición de la celda en la cuadrícula:

1	--hue: calc(100 + .5 * @row() * @col());

Luego esta variable se utiliza en la propiedad del fondo para determinar el tono:

1	background: hsla(var(--hue), 50%, 70%, @r(.1, .9));

Con un toque final en forma de clip-path obtenemos lo siguiente:

Para ver los detalles de cómo funciona exactamente nuestra demostración final, échale un vistazo al video tutorial en el minuto 19:46.

Conclusión

¿Conoces la frase «el cielo es el límite»? ¡En este caso «CSS es el límite»! Todo lo que puedes hacer con CSS lo puedes aplicar a CSS Doodle. Diviértete jugando con él. ¡Estoy ansioso por ver lo que creas!