Degradados
Los degradados son uno de los recursos que utilizan los diseñadores para decorar las webs y la verdad es que dan mucho juego para mejorar el aspecto de la página. Los degradados implementan un gradiente de color, que pasa de un estado a otro a lo largo del fondo de los elementos HTML, ya sea capas, elementos de listas, botones, etc. El navegador es el encargado de renderizar el degradado en función de las características escritas para definirlo.
Tipos de degradados
linear-gradient: En los que se crea un gradiente que va de un color a otro de manera lineal. Puede ser de arriba a abajo, de izquierda a derecha y viceversa. Incluso se puede conseguir un degradado en un gradiente de una línea con cualquier ángulo.
radial-gradient: En ellos se implementa un gradiente que se distribuye radialmente, desde un punto del elemento hacia fuera de manera circular.
repeating-linear-gradient: Se pueden hacer para conseguir un degradado entre dos o más colores que se repite varias veces a lo largo de todo el fondo del elemento al que se le coloque.
repeating-radial-gradient: Los degradados radiales con repetición son casi idénticos a los degradados radiales normales, los parámetros, tales como centro del degradado radial, forma y tamaño del motivo y los colores son exactamente los mismos.
linear-gradient
Sintaxis para la construcción de un degradado lineal.
background: linear-gradient(parámetros);
O bien:
background-image: linear-gradient(parámetros);
Todos los elementos que soportan imágenes de fondo permiten también colocar degradados de fondo. Los parámetros que usamos son:
A) Origen-y/o-angulo del degradado: El primer parámetro sería el origen desde donde comenzará el degradado y/o el ángulo de disposición del gradiente de color. Podemos decir que el degradado comience desde arriba, abajo o desde una esquina cualquiera. Por defecto los degradados serán distribuidos en un gradiente en línea recta.
B) lista-de-colores y opcionalmente, el lugar hasta donde se debe mostrar cada uno:
Luego colocaremos los colores, todos los que queramos, que deben utilizarse en el degradado, separados por comas. Además, si lo deseamos, podemos definir las paradas de color "color stops", que consiste en declarar el lugar desde donde debe empezar el gradiente del color.
Ejemplos:
Degradado por defecto:
Sólo tenemos que poner los dos colores que queramos.
background:linear-gradient(#7800FF, #48FF00);
Este degradado comienza en la esquita superior izquierda y se crea un gradiente que va hacia la esquina opuesta:
background: linear-gradient(top left, #fff, #f66);
Este degradado define su dirección por medio de un ángulo expresado en grados. 0 grados haría que el degradado comenzara en la parte de la izquierda y 180deg indica que el degradado empezaría justo por el lado contrario.
background: -webkit-linear-gradient(180deg, #f0f, #f66);
Este degradado tiene lo que se llama un "color stop" es decir, una parada de color, que está asignada con el 50% en el primer color.
background: linear-gradient(#00f 50%, #000);
Este degradado tiene una disposición en diagonal, por los 45 grados que se han definido. Además, podemos ver que hemos definido más de dos colores en el degradado. Podemos poner tantos como queramos, separados por comas.
background: linear-gradient(45deg, #66f, #f80, #ffc);
Este degradado se hace también en diagonal, desde la esquina inferior izquierda, igual que el anterior, pero hemos definido una serie de paradas de color (color stops), con lo cual la distribución del gradiente no es homogénea.
background: linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);
Este es el mismo degradado que el anterior, pero con paradas de color distintas. Además, estamos definiendo esos "color stops" con medidas en píxeles en lugar de porcentajes.
background: linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);
Este degradado, que empieza en la izquierda y con un gradiente recto hacia la derecha, tiene varios colores, los del arcoiris.
background: -webkit-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);
radial-gradient
La sintaxis resumida será la siguiente:
background: radial-gradient(parámetros);
O bien:
background-image: radial-gradient(parámetros);
Los parámetros que podemos indicar en la declaración radial-gradient() es donde realmente radica la dificultad y a la vez la potencia de este tipo de degradados. No obstante, la mayoría de los parámetros son opcionales. El listado de parámetros que podremos indicar es el siguiente:
A) Posición inicial del gradiente circular: Los degradados radiales comienzan en un punto cualquiera del fondo de un elemento y se extienden hacia fuera de ese punto con formas circulares o de elipse.
B) Forma y/o dimensión: La forma puede ser circular o elipse, para lo cual especificamos las palabras "circle" o "ellipse". El tamaño lo expresamos con otra serie de palabras clave, que indican hasta donde debe crecer el círculo o elipse: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover.
Alternativa a B) Tamaño: De manera alternativa a especificar la forma y dimensión del degradado -punto B) anterior-, podemos indicar un par de medidas en cualquier unidad CSS o porcentajes. Esas medidas se utilizarían para generar un círculo o una elipse del tamaño deseado para nuestro gradiente. La primera medida sería para la anchura de la elipse y la segunda sería para la altura.
C) Colores del degradado: Para acabar, se deben indicar cuantos colores se deseen, separados por comas, con la posibilidad de indicar las paradas de color que se deseen.
Ejemplos:
Esto hace un degradado desde el verde al azul turquesa, con todos los otros parámetros perdeterminados.
background: radial-gradient(#0f0, #06f);
En este caso hemos definido el punto de inicio del gradiente con "top left".
background: radial-gradient(top left, #fff, #f66);
Este degradado también declara la posición inicial del gradiente, pero lo hace mediante las coordenadas definidas con medidas en píxeles
background: radial-gradient(200px 30px, #f0f, #000);
En este declaramos la posición inicial con center, el comportamiento predeterminado, que coloca el inicio del degradado en centro, tanto vertical como horizontal, le hemos puesto una parada de color ("color stop") de 50% en el último color.
background: radial-gradient(center, #00f, #000 50%);
Definimos la forma del degradado, aunque solo indicamos "circle". Por tanto, el degradado comenzará en el centro y ocupará el 100% del espacio disponible.
background: radial-gradient(circle, #66f, #f80, #ffc);
Este degradado es exactamente igual que el anterior, pero en vez de circular es de elipse, cubriendo el 100% del espacio disponible.
background: radial-gradient(ellipse cover, #66f, #f80, #ffc);
Este ejemplo tiene definida la posición del degradado y la forma. Es el primero que especifica esos dos valores al mismo tiempo.
background: radial-gradient(10%, ellipse closest-side, #66f 60%, #f80 85%, #ffc);
El tamaño se ha definido con farthest-corner, con lo que el degradado será mayor, expandiéndose hasta la esquina más lejana.
background: radial-gradient(10%, ellipse farthest-corner, #66f 60%, #f80 85%, #ffc);
En este caso hemos definido la posición inicial con las coordenadas en píxeles y hemos definido tanto la forma como el tamaño del degradado en porcentaje
background: radial-gradient(20px 100px, 30% 80%, #fff, #666, #66f);
En este hemos definido el tamaño de la anchura y altura con dos valores en píxeles, pero como son iguales, en lugar de una elipse veríamos una forma circular, cuyo radio es siempre igual.
background: radial-gradient(left, 200px 200px, #f00 20%, #f80, #ff0, #0f0, #00f, #60f, #c0f);
repeating-linear-gradient
Los degradados de repetición se realizan de manera similar a los degradados lineares. La diferencia es que utilizaremos el nombre de atributo repeating-linear-gradient y que, para que se produzcan las repeticiones tendremos que utilizar paradas de color.
La sintaxis es la siguiente:
repeating-linear-gradient(origen, colores)
Ejemplos:
Este degradado comienza en blanco y termina en azul. Como no se indicó nada, irá de arriba a abajo, en un gradiente vertical en línea recta. Pero lo importante en este caso es que el segundo color tiene una parada al 25%. Eso quiere decir que se llegará al gris en el primer 25% del espacio del elemento y que a partir de ese punto comenzará de nuevo el degradado.
repeating-linear-gradient(#fff, #00f 25%);
En este segundo ejemplo tenemos otro degradado, esta vez con 4 colores. Como se puede ver, se le han asignado varias paradas de color, en lugar de solo una al último elemento. Como el último color stop está al 51% del elemento, el degradado se verá solo dos veces.
La sintaxis es la siguiente:
background: repeating-linear-gradient(left, #ffc, #f96 30%, #963 40%, #630 51%);
Esta es otra declaración de estilos, con un degradado en un gradiente oblicuo. Además, tiene la particularidad que se va de rojo a azul y luego de nuevo a rojo. Con ello conseguimos que las repeticiones del degradado siempre estén suavizadas y no se note cuando comienza y acaba una repetición, como nos ocurría en los dos ejemplos anteriores. Además, como se puede ver, la parada de color la hemos colocado en 50px, lo que quiere decir que el degradado se repetirá cada 50 píxeles, de modo que, el número de repeticiones variará dependiendo del tamaño del contenedor donde se asigne este fondo.
La sintaxis es la siguiente:
background: repeating-linear-gradient(45deg, red, blue, red 50px);
repeating-radial-gradient
Los degradados radiales con repetición son casi idénticos a los degradados radiales normales.
La sintaxis básica de este tipo de degradados es la siguiente:
repeating-radial-gradient(parámetros)
Ejemplos:
Este ejemplo hace un degradado entre dos colores, cuyo segundo elemento tiene una parada de color en el 25%.
background: repeating-radial-gradient(circle, #fff, #666 25%);
Este degradado hace un gradiente entre varios colores y el último de ellos tiene una parada en el 51%.
background: repeating-radial-gradient(left, circle, #ffc, #f96 30%, #963 40%, #630 51%);
En este ejemplo hacemos un degradado con forma de elipse y va desde rojo a azul y luego de nuevo a rojo. Al comenzar y acabar en rojo, se consigue que las repeticiones del degradado no tengan saltos bruscos de un color al otro. Como se puede ver, el último color tiene una parada de color en 50 píxeles, con lo que el degradado se repetirá de nuevo cada 50 puntos en la pantalla. El número de repeticiones dependerá del tamaño del elemento donde se coloque este degradado.
background: repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);
