Ejemplo de CSS conic-gradient ()

los conic-gradient()CSSLa función crea una imagen que consiste en un degradado con transiciones de color giradas alrededor de un punto central (en lugar de irradiar desde el centro). Ejemplos de degradados cónicos incluyen gráficos circulares y ruedas de colores. El resultado de la conic-gradient() La función es un objeto de la tipo de datos, que es un tipo especial de .

Sintaxis

/* A conic gradient rotated 45 degrees,
   starting blue and finishing red */
conic-gradient(from 45deg, blue, red);

/* A bluish purple box: the gradient goes from blue to red,
   but as only the bottom right quadrant is visible, as the
   center of the conic gradient is in at the top left corner */
conic-gradient(from 90deg at 0 0, blue, red);

/* Colorwheel */
background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);

Valores

Precedido por el from keyterm, y tomando un ángulo como su valor, define la rotación del degradado en el sentido de las agujas del reloj.

Utilizando los mismos valores de longitud, orden y término clave que la propiedad background-position, la posición define el centro del degradado. Si se omite, el valor predeterminado es center, lo que significa que el degradado estará centrado,.

Una parada de color valor, seguido de una o dos posiciones de parada opcionales, (una a lo largo del eje de circunferencia del gradiente).

La sugerencia de color es una sugerencia de interpolación que define cómo progresa el degradado entre las paradas de color adyacentes. La longitud define en qué punto entre dos paradas de color el color degradado debe alcanzar el punto medio de la transición de color. Si se omite, el punto medio de la transición de color es el punto medio entre dos paradas de color.

Nota: La representación de las paradas de color en degradados CSS sigue las mismas reglas que las paradas de color en Degradados SVG.

Descripción

Como ocurre con cualquier gradiente, un gradiente cónico no tiene dimensiones intrínsecas; es decir, no tiene un tamaño natural o preferido, ni una proporción preferida. Su tamaño concreto coincidirá con el tamaño del elemento al que se aplica, o el tamaño del se establece en algo diferente al tamaño del elemento.

Para crear un degradado cónico que se repite para llenar una rotación de 360 ​​grados, use el repeating-conic-gradient() función en su lugar.

Porque s pertenecen a la tipo de datos, solo se pueden utilizar cuando s se pueden utilizar. Por esta razón, conic-gradient() no funcionará en background-color y otras propiedades que utilizan el tipo de datos.

¿Por qué se llama gradiente “cónico”? Si las paradas de color son mucho más claras en un lado que en el otro, puede parecer un cono desde arriba.

Composición de un gradiente cónico

La sintaxis de gradiente cónico es similar a la sintaxis de gradiente radial, pero las paradas de color se colocan alrededor de un arco de gradiente, la circunferencia de un círculo, en lugar de en la línea de gradiente que emerge del centro del gradiente. Con degradados cónicos, los colores cambian como si giraran alrededor del centro de un círculo, comenzando en la parte superior y yendo en el sentido de las agujas del reloj. En un degradado radial, la transición de colores desde el centro de una elipse, hacia afuera, en todas las direcciones.

Un degradado cónico se especifica indicando un ángulo de rotación, el centro del degradado y luego especificando una lista de paradas de color. A diferencia de los degradados lineales y radiales, cuyas paradas de color se colocan especificando una longitud, las paradas de color de un degradado cónico se especifican con un ángulo. Las unidades incluyen deg para grados, grad para gradientes, rad para radianes, y turn por turnos. Hay 360 grados, 400 gradianes, 2π radianes y 1 vuelta en un círculo. Los navegadores que admiten gradientes cónicos también aceptan valores porcentuales, con 100% igual a 360 grados, pero esto no está en la especificación.

Similar a los degradados radiales, la sintaxis de degradado cónico permite colocar el centro del degradado en cualquier lugar dentro o incluso fuera de la imagen. Los valores de la posición son similares a la sintaxis de la posición de fondo de 2 valores.

El arco de gradiente es la circunferencia del gradiente. los punto de partida del gradiente o arco es el norte, o 12:00 pm. Luego, el gradiente es girado por el de ángulo. Los colores del degradado están determinados por las paradas de color en ángulo, sus puntos de inicio, los puntos finales y, en el medio, y los puntos de parada de color en ángulo opcionales. Las transiciones entre colores se pueden modificar con sugerencias de color entre las paradas de color de los colores adyacentes.

Personalizar degradados

Al agregar más puntos de parada de color en ángulo en el arco de degradado, puede crear una transición altamente personalizada entre varios colores. La posición de una parada de color se puede definir explícitamente utilizando un . Si no especifica la ubicación de una parada de color, se coloca a medio camino entre la que la precede y la que le sigue. Si no especifica un ángulo para la primera o la última parada de color, sus valores son 0deg y 360deg respectivamente. Los siguientes dos gradientes son equivalentes

conic-gradient(red, orange, yellow, green, blue);conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

De forma predeterminada, los colores cambian suavemente desde el color en una parada de color hasta el color en la siguiente parada de color, siendo el punto medio entre los colores el punto medio entre la transición de color. Puede mover este punto medio de transición de color a cualquier punto entre dos paradas de color agregando una pista de color, que indique dónde debería estar el medio de la transición de color. Lo siguiente es rojo continuo desde el inicio hasta la marca del 10%, las transiciones de rojo a azul durante el 80% del turno, siendo el 10% final azul continuo. Sin embargo, el punto medio del cambio de gradiente de rojo a azul está en la marca del 20% en lugar de en la marca del 50%, como hubiera sucedido sin la sugerencia de color de 80grad, o 20%.

conic-gradient(red 40grad, 80grad, blue 360grad);

Si dos o más paradas de color están en la misma ubicación, la transición será una línea dura entre el primer y el último color declarado en esa ubicación. Para usar gradientes cónicos para crear gráficos circulares, que NO es la forma correcta de crear gráficos circulares ya que las imágenes de fondo no son accesibles, use paradas de color duras, donde los ángulos de parada de color para dos paradas de color adyacentes son los mismos. La forma más sencilla de hacer esto es utilizar múltiples paradas de colores de posición. Las siguientes dos declaraciones son equivalentes:

conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);

Las paradas de color deben enumerarse en orden ascendente. Las siguientes paradas de color de valor más bajo anularán el valor de la parada de color anterior creando una transición difícil. Los siguientes cambios de rojo a amarillo en la marca del 30%, y luego pasa de amarillo a azul sobre el 35% del gradiente

conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);

Hay otros efectos que puede crear con degradados cónicos. Curiosamente, un tablero de ajedrez es uno de ellos. Al crear cuadrantes con un cuadrante blanco superior izquierdo e inferior derecho y cuadrantes negros inferior izquierdo y superior derecho, luego repitiendo el degradado 16 veces (cuatro veces a lo ancho y cuatro veces hacia abajo) puede hacer un tablero de ajedrez.

conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);background-size: 25% 25%;

Y sí, puede mezclar y combinar diferentes unidades de ángulos, pero no lo haga. Lo anterior es difícil de leer.

Preocupaciones de accesibilidad

Los navegadores no proporcionan ninguna información especial sobre las imágenes de fondo de la tecnología de asistencia. Esto es importante principalmente para los lectores de pantalla, ya que un lector de pantalla no anunciará su presencia y, por lo tanto, no transmitirá nada a sus usuarios. Si bien es posible crear gráficos circulares, tableros de ajedrez y otros efectos con gradientes cónicos, las imágenes CSS no proporcionan una forma nativa de asignar texto alternativo y, por lo tanto, los usuarios de lectores de pantalla no podrán acceder a la imagen representada por el gradiente cónico. Si la imagen contiene información crítica para comprender el propósito general de la página, es mejor describirla semánticamente en el documento.

• MDN Entendiendo WCAG, explicaciones de la Pauta 1.1
• Comprender el criterio de cumplimiento 1.1.1 | W3C Entendiendo WCAG 2.0

Ejemplos de

Gradiente a 40 grados

divbackground-image:conic-gradient(from 40deg, #fff, #000);

Gradiente descentrado

divbackground:conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);

Gráfico circular degradado

Este ejemplo utiliza paradas de color de varias posiciones, con colores adyacentes que tienen el mismo valor de parada de color, creando un efecto de rayas.

divbackground:conic-gradient(
     red 36deg, orange 36deg 170deg, yellow 170deg);border-radius: 50%

Tablero de damas

divbackground:conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
     top left / 25% 25% repeat;border: 1px solid;

Más ejemplos de gradiente cónico

Consulte Uso de degradados CSS para obtener más ejemplos.

Especificaciones

Compatibilidad del navegador

Ver también

• Usar degradados CSS
• Otras funciones de gradiente: repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• image()
• element()
• image-set()
• cross-fade()