Gradientes
Gradientes lineares, linear-gradient
Los gradientes más conocidos o más fáciles son los gradientes lineales, donde tenemos una transición progresiva entre dos colores. La sintaxis es la siguiente:
- linear-gradient (color, color, …): gradiente de colores hacia abajo
- linear-gradient (dirección, color, color, …): gradiente con dirección específica
- linear-gradient (dirección, color tamaño, color tamaño, …): gradiente indicado dónde comienza a cambiar el color
- linear-gradient (dirección, color tamaño tamaño, color tamaño tamaño , …): gradiente indicando el inicio y final de cada color.
Por ejemplo, si queremos crear un degradado con los colores azul – rojo desde arriba hacia abajo sería:
.element {
background: linear-gradient(blue, red);
}El ejemplo anterior sería un ejemplo básico, vamos a ver un poco más el resto de parámetros que le podemos decir a esta propiedad.
Dirección del gradiente
La dirección puede ser tanto un número de grados como “una palabra clave” que nos indique la dirección. Por ejemplo, las palabras claves asociadas a los grados serían:
- to top: de abajo a arriba
- to top right: hacia la esquina superior derecha
- to right: de izquierda a derecha
- to bottom right: hacia la esquina inferior derecha
- to bottom: de arriba hacia abajo (valor por defecto)
- to bottom left: hacia la esquina inferior izquierda
- to left: el gradiente va de derecha a izquierda
- to top left: el gradiente va hacia la esquina superior izquierda.
.element {
background: linear-gradient(to right, blue, red);
}Posición del color
Por defecto, las distancias entre los colores se ajustan automáticamente, pero si queremos cambiarlas debemos poner un tamaño (en porcentaje o píxel) después del color. Este porcentaje o pixel representa el punto central del color que lo precede respecto al tamaño del gradiente completo.
.element {
background: linear-gradient(to right, #d32f2f 30%, #1976d2 70%);
/* Aquí, el rojo (#d32f2f) ocupa el 30% del espacio, el azul (#1976d2) ocupa el 70%, y la transición (la mezcla) ocurre solo en el espacio entre el 30% y el 70%. */
}Inicio y final del color
Podemos establecer un punto de inicio y fin del color. Podemos declarar varias paradas de color. Por defecto, si un color tiene 0% como inicio el primer color declarado empezará ahí, del mismo modo, si el color no tiene establecido el final se considerará que parará en el 100%. Veamos tres linear-gradient que hacen lo mismo:
.element {
background: linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
background: linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
/* Esto crea el siguiente gradiente (asumiendo la dirección to bottom por defecto):
De 0% a 10%: Una transición suave de red (que está en 0%) a orange (que llega a 10%).
De 10% a 30%: Una banda sólida de color orange.
De 30% a 50%: Una transición suave de orange (en 30%) a yellow (en 50%).
De 50% a 70%: Una banda sólida de color yellow.
De 70% a 90%: Una transición suave de yellow (en 70%) a green (en 90%).
De 90% a 100%: Una banda sólida de color green (ya que el último color siempre se extiende hasta el final).
*/
}Propiedad repeating-linear-gradient
Si en lugar de utilizar la función linear-gradient usamos repeating-linear-gradient podemos hacer que el patrón de colores se repita de forma continua. El navegador se va a encargar de repetirlos hasta que no quede más espacio en el html seleccionado.
.element {
background: repeating-linear-gradient(to right, blue 0% 10%, yellow 10% 20%, red 20% 30%);
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplos de Gradientes</title>
<link rel="stylesheet" href="1.lineargradient.css">
</head>
<body>
<div class="contenedor-principal">
<div class="columna">
<h2>linear-gradient</h2>
<div class="caja-demo gradiente-lineal"></div>
<p>
El gradiente se dibuja <strong>una sola vez</strong> y se estira
para rellenar toda la caja, desde el color de inicio
hasta el color de fin.
</p>
</div>
<div class="columna">
<h2>repeating-linear-gradient</h2>
<div class="caja-demo gradiente-repetido"></div>
<p>
Se define un <strong>patrón pequeño</strong> (una banda
amarilla y una gris de 20px cada una) y
el navegador lo repite infinitamente.
</p>
</div>
</div>
</body>
</html>