A sus órdenes, patrón!

Publicado por Monchito

Hay momentos en que necesitamos cambiar el fondo de nuestro sitio web por algo más que un color sólido, tal vez un patrón de rayas, círculos o rombos.

Tradicionalmente, se creaban pequeñas imágenes y se repetían en el fondo hasta crear el patrón deseado. Esto resulta poco practico; además de perder tiempo diseñando el patrón perfecto (y rediseñándolo cada vez que se quiera hacer un simple cambio), las imágenes consumen recursos del servidor, y mientras más complejas están sean, más tiempo tardará la página en cargarse.

Hoy en día podemos hacer todo esto con CSS.

Hojas de estilo en cascada, o Cascading Style Sheets (CSS) en inglés, es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Antes de comenzar:

Por cuestiones de simplificación, el código a continuación no contiene los prefijos CSS del navegador.  Los prefijos CSS son los que se anteponen al nombre de la propiedad de estilo para que el navegador correspondiente reconozca esa característica.

-moz- para los navegadores que utilizan el motor de renderizado Gecko, -webkit- para los que utilizan Webkit, -ms- para los que utilizan Trident, el motor de Microsoft, y -o- para Presto, motor de renderizado de Opera.

Comencemos con un pequeño ejemplo:

background: linear-gradient(left, #fff 20%, #e01 80%);

Acá estamos declarando que queremos que el fondo (background) tenga un gradiente lineal (linear-gradient) de izquierda (left) a derecha, comenzando con el color blanco (#fff) y terminado con el rojo (#e01).

Los porcentajes se refieren a que el primer 20% del fondo va a ser de color blanco (el primer color) y el último 20% (resta de 100% – 80%) va a ser de color rojo. El restante 60% que va en el medio va a ser el gradiente que hace la transición de blanco a rojo.

Acá puedes ver un ejemplo en vivo con el cual puedes jugar y experimentar. 

Miremos otro ejemplo:

background: linear-gradient(left, #fff 40%, #e01 90%);

Acá estamos llenando un 40% del fondo en blanco, apenas el 10% en rojo, y el restante 50% con el gradiente. Ejemplo en vivo.

Pero que pasaría si le asignamos a ambos colores un valor igual? Digamos de 50-50?

background: linear-gradient(left, #fff 50%, #e01 50%);

Exacto! El gradiente desaparece. La mitad del fondo lo ocupa ahora el color blanco y la otra mitad el color rojo, dejando sin espacio al gradiente para que haga la transición de un color a otro. Ejemplo en vivo.

Podemos incluso controlar donde comienza un color y termina otro ajustando un poco los valores, como en el ejemplo a continuación:

background: linear-gradient(left, #fff 90%, #e01 90%);

Ejemplo en vivo. Como podemos concluir del ejemplo anterior, si el segundo color inicia donde termina el anterior, no hay gradiente y se muestra únicamente dos colores sólidos.

Podemos incorporar esto a nuestro diseño cuando queramos, por ejemplo, que el color del fondo sea el mismo que el de una columna.

Ahora que aprendimos lo básico, vamos a introducir una línea adicional de código. Démosle la bienvenida a background-size:

background: linear-gradient(left, #fff 50%, #e01 50%);
background-size: 100px 100px;

Listo! Hicimos nuestro primer patrón en CSS con dos simples líneas de código. Utiliza el ejemplo en vivo y cambia left por top para obtener un patrón de líneas horizontales.

Vayamos ahora con algo más complejo. Supongamos que queremos que nuestro patrón tenga barras diagonales en vez de horizontales o verticales. Probemos darle a las barras una pequeña inclinación de 45 grados sustituyendo left por 45deg:

background: linear-gradient(45deg, #fff 50%, #e01 50%);
background-size: 100px 100px;

Ejemplo en vivo. Aunque no se ve tan feo el patrón, no salió como esperábamos, verdad?

La razón de esto es porque la rotación ocurre de forma individual, en cada uno de los cuadros de 100 pixeles. Probemos hacerlo de esta forma:

background: linear-gradient(45deg, #fff 25%,
     #e01 25%, #e01 50%,
     #fff 50%, #fff 75%,
     #e01 75%);
background-size: 100px 100px;

Lo que hicimos básicamente con el código anterior fue añadirle paradas adicionales a un 25%, 50% y 75% para que las barras fluyan de forma diagonal. Para invertir la dirección de las barras cambias 45deg por -45deg. Ejemplo en vivo.

Si jugaste un poco con el código en el ejemplo en vivo, te habrás dado cuenta de que si cambias el grado de inclinación de, por ejemplo, 45deg a 60deg, el truco ya no funciona.

La forma correcta de hacer el efecto de barras diagonales es con el siguiente código:

background: repeating-linear-gradient(45deg, #fff, #fff 50px, #e01 50px, #e01 100px);

Como podrás ver, sustituimos linear-gradient por repeating-linear-gradient y ya no declaramos el tamaño de las barras con background-size, sino que lo definimos usando las paradas en las diferentes posiciones de los colores. Juega un poco con el ejemplo en vivo, cambiando la inclinación de las barras.

Y ahora que? 

Juega y experimenta! Con la ayuda de CSS puedes ahorrar tiempo y esfuerzo, pero también puedes crear patrones muy complejos e interesantes, como obras de arte.

Visita la galería de patrones de Lea Verou para ver ejemplos increíbles de patrones, como el de tartan o el yin-yang.

Crédito de la foto: Felipe Cabral Minuttin, CC-BY 2.0.