CSS3 Gradientes
Los gradientes CSS3 te permiten mostrar una transición suave entre dos o más colores especificados.
Antes, tenías que usar imágenes para lograr estos efectos. Sin embargo, mediante el uso de gradientes CSS3, puedes reducir el tiempo de descarga y el uso de ancho de banda. Además, los elementos con efectos de gradiente se ven mejor al ampliarlos, porque el gradiente es generado por el navegador.
CSS3 define dos tipos de gradientes:
- Gradientes lineales (Linear Gradients) - hacia abajo / hacia arriba / hacia la izquierda / hacia la derecha / en diagonal
- Gradientes radiales (Radial Gradients) - definidos por su centro
Propiedades relacionadas con los gradientes lineales:background-image。
Herramienta en línea de gradientes lineales:Herramienta en línea de gradientes.
Soporte del navegador
Los números de la tabla indican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota:Los navegadores IE8 y versiones anteriores de IE no son compatibles con esta propiedad.
Gradientes lineales CSS3
Para crear un gradiente lineal, debes definir al menos dos nodos de color. Los nodos de color son los colores entre los cuales deseas una transición suave. Además, puedes establecer un punto de inicio y una dirección (o un ángulo).
Ejemplo de gradiente lineal:
Sintaxis
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Gradiente lineal - de arriba hacia abajo (por defecto)
El siguiente ejemplo demuestra un gradiente lineal que comienza desde arriba. El punto de inicio es rojo y transiciona lentamente a azul:
Ejemplo
Gradiente lineal de arriba a abajo:
Pruébalo »
Gradiente lineal - de izquierda a derecha
El siguiente ejemplo demuestra un gradiente lineal que comienza desde la izquierda. El punto de inicio es rojo y transiciona lentamente a amarillo:
Ejemplo
Gradiente lineal de izquierda a derecha:
Pruébalo »
Gradiente lineal - diagonal
Puedes crear un gradiente diagonal especificando las posiciones iniciales horizontal y vertical.
El siguiente ejemplo demuestra un gradiente lineal que comienza desde la esquina superior izquierda (hasta la esquina inferior derecha). El punto de inicio es rojo y transiciona lentamente a amarillo:
Ejemplo
Gradiente lineal desde la esquina superior izquierda a la esquina inferior derecha:
Pruébalo »
Usando ángulos
Si deseas tener más control sobre la dirección del gradiente, puedes definir un ángulo en lugar de una dirección predefinida (to bottom, to top, to right, to left, to bottom right, etc.).
Sintaxis
background-image: linear-gradient(angle, color-stop1, color-stop2);
El ángulo es el ángulo entre la línea horizontal y la línea de gradiente, calculado en sentido antihorario. En otras palabras, 0deg creará un gradiente de abajo hacia arriba, y 90deg creará un gradiente de izquierda a derecha.
Sin embargo, ten en cuenta que muchos navegadores (Chrome, Safari, Firefox, etc.) usaban el estándar antiguo, es decir, 0deg creaba un gradiente de izquierda a derecha, y 90deg creaba un gradiente de abajo hacia arriba. Fórmula de conversión90 - x = yDonde x es el ángulo estándar e y es el ángulo no estándar.
El siguiente ejemplo demuestra cómo usar ángulos en un gradiente lineal:
Ejemplo
Gradiente lineal con un ángulo especificado:
Pruébalo »
Usando múltiples nodos de color
El siguiente ejemplo demuestra cómo configurar múltiples nodos de color:
Ejemplo
Gradiente lineal de arriba a abajo con múltiples nodos de color:
Pruébalo »
El siguiente ejemplo demuestra cómo crear un gradiente lineal con colores de arcoíris y texto:
Ejemplo
Pruébalo »
Usando transparencia (transparent)
Los gradientes CSS3 también son compatibles con la transparencia (transparent), que se puede usar para crear efectos de desvanecimiento.
Para agregar transparencia, usamos la función rgba() para definir los nodos de color. El último parámetro de la función rgba() puede ser un valor de 0 a 1, que define la transparencia del color: 0 significa completamente transparente, 1 significa completamente opaco.
El siguiente ejemplo demuestra un gradiente lineal que comienza desde la izquierda. El punto de inicio es completamente transparente y transiciona lentamente a rojo completamente opaco:
Ejemplo
Gradiente lineal de izquierda a derecha con transparencia:
Pruébalo »
Gradiente lineal repetido
La función repeating-linear-gradient() se usa para repetir gradientes lineales:
Ejemplo
Un gradiente lineal repetido:
Pruébalo »
Gradientes radiales CSS3
El gradiente radial se define por su centro.
Para crear un gradiente radial, también debes definir al menos dos nodos de color. Los nodos de color son los colores entre los cuales deseas una transición suave. Además, puedes especificar el centro, la forma (círculo o elipse) y el tamaño del gradiente. De forma predeterminada, el centro del gradiente es center (representa el punto central), la forma del gradiente es ellipse (representa una elipse), y el tamaño del gradiente es farthest-corner (representa la esquina más lejana).
Ejemplo de gradiente radial:
Sintaxis
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Gradiente radial - nodos de color distribuidos uniformemente (por defecto)
Ejemplo
Gradiente radial con nodos de color distribuidos uniformemente:
Pruébalo »
Gradiente radial - nodos de color distribuidos de manera desigual
Ejemplo
Gradiente radial con nodos de color distribuidos de manera desigual:
Pruébalo »
Configurar la forma
El parámetro shape define la forma. Puede ser el valor circle o ellipse. Aquí, circle representa un círculo, ellipse representa una elipse. El valor predeterminado es ellipse.
Ejemplo
Gradiente radial con forma de círculo:
Pruébalo »
Uso de palabras clave de diferentes tamaños
El parámetro size define el tamaño del gradiente. Puede ser uno de los siguientes cuatro valores:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Ejemplo
Gradiente radial con diferentes palabras clave de tamaño:
Pruébalo »
Gradiente radial repetido
La función repeating-radial-gradient() se usa para repetir gradientes radiales:
Ejemplo
Un gradiente radial repetido:
Pruébalo »