El mejor tutorial de CSS3 gradiente en 2024. En este tutorial podrás aprender Soporte para el navegador,gradiente lineal CSS3,Ejemplos,Ejemplos,Ejemplos,uso ángulo,Ejemplos,El uso de múltiples nodos de color,Ejemplos,Ejemplos,La transparencia (transparencia),Ejemplos,gradiente lineal duplicado,Ejemplos,degradado radial CSS3,Ejemplos,Ejemplos,Ajuste de forma,Ejemplos,Use palabras clave en diferentes tamaños,Ejemplos,degradado radial de repetición,Ejemplos,
gradientes CSS3 (gradientes) le permite mostrar una transición suave entre los dos o más colores.
Anteriormente, usted tiene que utilizar una imagen para lograr estos efectos. Sin embargo, mediante el uso de gradientes CSS3 (gradientes), puede reducir los eventos de descarga y el uso de la banda ancha. Además, los elementos de efectos de transición se ven mejor cuando se acerca la imagen, debido a que el gradiente (gradiente) es generado por el navegador.
CSS3 define dos tipos de gradientes (gradientes):
Los números en la tabla de atributos especifica el pleno apoyo de la primera versión del navegador.
Detrás con webkit -, - moz- o -o- especifica el número deseado con el atributo de prefijo para apoyar la primera versión.
属性 | |||||
---|---|---|---|---|---|
linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
Para crear un gradiente lineal, debe definir al menos dos nodos de colores. nodo de color que es el color que desee para mostrar una transición sin problemas. Al mismo tiempo, también puede establecer un punto de partida y una dirección (o un ángulo).
ejemplos gradiente lineal:
gradiente lineal - de arriba a abajo (por defecto)
El siguiente ejemplo demuestra un gradiente lineal desde la parte superior. El punto de partida es de color rojo, y la transición lentamente a azul:
gradiente lineal de arriba a abajo:
gradiente lineal - de izquierda a derecha
El siguiente ejemplo demuestra un gradiente lineal desde la izquierda. El punto de partida es de color rojo, y la transición lentamente a azul:
gradiente lineal de izquierda a derecha:
gradiente lineal - diagonal
Usted puede hacer un gradiente diagonal mediante la especificación de posición de salida horizontal y vertical.
El siguiente ejemplo demuestra desde la esquina superior izquierda (abajo a la derecha) gradiente lineal. El punto de partida es de color rojo, y la transición lentamente a azul:
Desde la parte superior izquierda a la esquina inferior derecha de un gradiente lineal:
Si usted quiere más control sobre la dirección del gradiente, se puede definir un punto de vista, en lugar de una dirección predefinida (abajo, arriba, a la derecha, a la izquierda, a la derecha abajo, y así sucesivamente).
Ángulo se refiere al ángulo entre la horizontal y la línea de gradiente, calculado en sentido antihorario. En otras palabras, 0deg creará un gradiente de abajo hacia arriba, 90 grados crea un gradiente de izquierda a derecha.
Sin embargo, tenga en cuenta que muchos navegadores (Chrome, Safari, fiefox, etc.) utilizando la antigua norma, a saber 0deg creará un gradiente de izquierda a derecha, 90 grados va a crear un gradiente de abajo hacia arriba. fórmula de conversión de 90 - x = y, donde x es el ángulo estándar, y es un ángulo no estándar.
El siguiente ejemplo muestra cómo utilizar el ángulo de gradiente lineal:
gradiente lineal con un ángulo especificado:
El siguiente ejemplo muestra cómo establecer una pluralidad de nodos de color:
gradiente lineal de arriba a abajo con una pluralidad de nodos de color:
El siguiente ejemplo muestra cómo crear un arco iris de colores y texto con un gradiente lineal:
gradientes CSS3 también apoya la transparencia (transparencia), que puede ser utilizado para crear el efecto de debilitamiento se desvanece.
Para aumentar la transparencia, se utiliza la función RGBA () para definir el color del nodo. RGBA () funcione el último parámetro es un valor entre 0 y 1, que define la transparencia del color: 0 es completamente transparente, 1 es totalmente opaco.
El siguiente ejemplo demuestra un gradiente lineal desde la izquierda. El punto de partida es completamente transparente, y la transición lentamente a totalmente opaco de color rojo:
gradiente lineal de izquierda a derecha, con la transparencia:
función de repetición lineal en gradiente de () se utiliza para repetir un gradiente lineal:
Un gradiente lineal duplicado:
degradado radial se define por su centro.
Para crear un degradado radial, también debe definir al menos dos nodos de colores. nodo de color que es el color que desee para mostrar una transición sin problemas. Al mismo tiempo, también puede especificar el centro de la gradación, la forma (prototipo u oval), tamaño. Por defecto, los que están en el centro es el centro (que se muestra en el centro), la forma de la gradación es la elipse (elipse representado), el tamaño del gradiente es más lejana esquina (representado a la esquina más alejada).
ejemplos degradado radial:
Pendiente radial - Color nodos distribuidos de manera uniforme (por defecto)
nodo de color degradado radial uniformemente distribuida:
degradado radial - el color distribuye de manera desigual nodos
nodo de color degradado radial distribuido de manera desigual:
parámetro de forma define la forma. Puede ser un círculo o una elipse valor. En donde, el círculo que representa el círculo, elipse indica ovalada. El valor por defecto es elipse.
La forma de un degradado radial circular:
parámetro de tamaño define el tamaño del gradiente. Puede ser los cuatro valores siguientes:
degradado radial con otras palabras clave tamaños:
función de repetición-radial gradiente () se utiliza para repetir un degradado radial:
Repetir un degradado radial: