Contraste() | Consejos CSS

CSS contrast() La función de filtro aumenta o disminuye el contraste de un elemento, haciendo que los colores se destaquen más o oscureciéndolos a gris. diferente de los demás filter Funciones similares brightness() o saturate(), contrast() Afecta tanto a la saturación como al brillo, conservando sólo el tono del color.

.low {
  filter: contrast(50%);
}

.normal {
  filter: contrast(100%);
}

.high {
  filter: contrast(200%);
}

este contrast() La función está definida en Módulo de efectos de filtro Nivel 1 Especificación.

sintaxis

La sintaxis oficial es contrast() La función es:

<contrast()> = contrast( ( <number> | <percentage> )? )

o simplemente:

filter: contrast(<amount>);

este contrast() Función sólo compatible con CSS filter y backdrop-filter característica.

argumento

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Works with CSS variables */
--amount: 200%;
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */

este contrast() La función toma un único parámetro, que puede ser un valor decimal o porcentual positivo. Este parámetro determina el nuevo contraste del elemento, donde:

• 0 o 0% Seca todo el contraste del elemento, dando como resultado una imagen completamente gris.
• 1 o 100% Deja el elemento completamente sin cambios.
• Los valores anteriores 1 o 100% Aumenta linealmente el contraste.

No se permiten valores negativos. Pero las variables CSS son:

.element {
  --filter-amount: 150%;
  filter: contrast(var(--filter-amount));
}

cómo contrast() color de efecto

Al igual que otras funciones de filtro, contrast() El filtro se basa exclusivamente en operaciones matemáticas RGB. Específicamente, dado un <amount> Multiplica cada canal RGB por este valor. <amount> luego agrega 255 * (0.5 - 0.5 * <amount>) al resultado. Efectivamente, esto afecta el color de dos maneras:

• Alto contraste (mayor que 1) hace que los píxeles brillantes sean más brillantes y los píxeles oscuros más oscuros, de modo que los colores se vuelven más vívidos.
• Bajo contraste (menos de 1) atrae todos los píxeles hacia el gris medio. Esto reduce la diferencia entre las áreas claras y oscuras, haciendo que la imagen parezca plana y suave.

Uso básico

Ciertas imágenes de fondo (normalmente en la sección principal o en el carrusel) pueden dificultar la lectura del texto en primer plano. Especialmente si tiene colores muy claros y oscuros que pueden competir con cualquier color de texto. Para resolver este problema, podemos usar contraste() para reducir la diferencia entre los colores blanco y negro de la imagen, haciendo que el texto sea más legible en relación con toda la imagen.

img {
    filter: contrast(70%) brightness(60%);
}

El bajo contraste aplana la imagen, y como ventaja también podemos reducir el brillo de la imagen para que el texto destaque sin importar el color.

Demostración: haga que las imágenes de las tarjetas de productos aparezcan al pasar el mouse

Otra aplicación útil contrast() para resaltar imágenes durante la interacción del usuario. Por ejemplo, en una fila de tarjetas de imágenes, podríamos aumentar el contraste de la imagen y escalarla al pasar el mouse.

.card img {
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.card:hover img {
  filter: contrast(125%);
  transform: scale(1.05);
}

Sí contrast() y contrast-color()?

Aunque estas dos funciones CSS tienen nombres similares, no las confundas.

• contrast() Es una función de filtro que puede hacer que los elementos sean más vívidos. Haz el blanco más claro y el negro más oscuro.
• contrast-color() Devuelve el color del texto que tiene el mayor contraste con el fondo sólido. Su color final es blanco o negro, según qué color contraste con el fondo. Tampoco es una función de filtrado.

Soporte del navegador

este contrast() Actualmente, todos los navegadores modernos admiten esta función.

Importante