CSS3 06 Gradientes
Otra funcionalidad que se echaba mucho de menos en versiones anteriores de CSS era la de utilizar fondos con gradientes, o lo que es lo mismo, un color inicial que se transforma poco a poco en uno o varios colores sucesivamente. Sin embargo, en versiones anteriores a CSS3 no era posible hacerlo desde código.
En CSS3 se introducen algunas expresiones relacionadas que harán esta tarea algo muy sencillo, pudiendo utilizarlas fácilmente con la propiedad background-image.
Gradientes lineales
El primer tipo de gradiente es el gradiente lineal, que permite crear fondos con los colores gradientes indicados y una cierta dirección definida:
div {
background-image: linear-gradient([dirección], [color1], [color2], ...)
}
Donde:
Veamos dos ejemplos con una dirección horizontal (hacia la derecha). El primero de ellos tiene sólo dos colores (azul y rojo), mientras que el segundo tiene tres colores (azul, amarillo y rojo). Ambos tienen como dirección una orientación hacia la derecha:
Colores
El primer ejemplo que se ve en la imagen sería el siguiente en código CSS:
div {
background-image: linear-gradient(to right, blue, red);
}
Es importante darse cuenta de que se pueden ir añadiendo colores, ya que no estamos limitados a gradientes de sólo dos colores. Como se puede ver en el segundo ejemplo, hemos añadimos un color amarillo antes del rojo:
div {
background-image: linear-gradient(to right, blue, yellow, red);
}
Por defecto, las distancias entre colores se ajustan automáticamente con proporciones equivalentes, salvo que especifiquemos un tamaño (porcentaje, por ejemplo) justo después del color en cuestión. Veamos un ejemplo:
div {
background-image: linear-gradient(to right, blue 20%, yellow 20%, red);
}
Como vimos antes, el primer parámetro utilizado en los ejemplos fue to right, que indica la orientación del gradiente. En este parámetro se puede indicar tanto una palabra clave como un número de grados que represente la dirección.
Nota: Si utilizas los grados en lugar de las palabras clave puedes usar valores intermedios (por ejemplo, 280deg o 58deg) y ser más preciso con la dirección si lo necesitas.
Gradiente radial
A parte de gradientes lineales se pueden crear gradientes con formas circulares. Para ello, sólo tenemos que utilizar la expresión radial-gradient en lugar de linear-gradient:
div {
background-image: radial-gradient([forma] [tamaño] at [ubicación], [color1], [color2], ...);
}
Donde:
El primer ejemplo que se ve en la imagen anterior sería el siguiente en código CSS:
div {
background-image: radial-gradient(circle farthest-corner at center, blue, red);
}
En el caso de la forma hemos elegido circle, obteniendo así un gradiente con forma circular. El valor ellipse suele ser útil en el caso en el que alarguemos el ancho del elemento y queramos que el gradiente también se estire. Con la opción de circle mantenemos el gradiente con forma circular siempre.
En el caso del tamaño, tenemos varias opciones para indicar el tamaño que tendrá nuestro gradiente:
En el caso de la ubicación, simplemente especificamos la posición en la que queremos que esté colocado el centro del gradiente.
Es importante recalcar que los tres primeros parámetros (forma, tamaño y posición) pueden llegar a omitirse individualmente, tomando por omisión su valor por defecto y dando como posibilidad esquemas complejos y variados, que pueden invalidar el gradiente si se llega a un caso "imposible".
Gradientes recursivos
Añadiendo el prefijo repeating- a las expresiones anteriores podemos conseguir que el efecto del gradiente, en lugar de adaptarse a la región completa, realice una repetición constante. Comprueba los siguientes ejemplos individuales:
div {
background: repeating-linear-gradient(circle, blue, yellow, red);
background: repeating-radial-gradient(circle, blue, yellow, red);
}
En CSS Gradient
https://cssgradient.io/
puedes encontrar un generador de gradientes que te permitirá crear estos vistosos y llamativos efectos.
No hay comentarios:
Publicar un comentario
Gracias por vuestros aportes.