saturar() | Consejos CSS

CSS saturate() La función aumenta o disminuye la saturación de color de un elemento, o en otras palabras, la intensidad del color del elemento. este saturate() y filter o backdrop-filter característica.

img {
  filter: saturate(200%);
}

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

sintaxis

este saturate() La sintaxis formal de la función es la siguiente:

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

En la práctica, escribimos esto como:

filter: saturate(<amount>);

debate

este saturate() La función toma un único parámetro, que puede ser un valor decimal o porcentual positivo. Este parámetro determina la nueva saturación del elemento de entrada, donde:

• 0 o 0% Seca todos los colores del elemento, produciendo una imagen en escala de grises.
• 1 o 100% Deja el elemento completamente sin cambios.
• Los valores anteriores 1 o 100% Aumenta linealmente la saturación.

No se permiten valores negativos.

/* Using percentages */
filter: saturate(0%); /* Completely grayscale */
filter: saturate(50%); /* Low saturation */
filter: saturate(100%); /* Unchanged */
filter: saturate(150%); /* Oversaturated by 1.5x  */

/* Decimal or percentage  */
filter: saturate(0.5);
filter: saturate(50%);

/* No argument */
filter: saturate(); /* Same as 100% or 1 */

/* Negative value */
filter: saturate(-1.5); /* Invalid */

Uso básico

este saturate() Los filtros rara vez se utilizan solos. En cambio, normalmente lo combinamos con otras funciones relacionadas con filtros para producir efectos más interesantes. Por ejemplo, podemos combinar saturate() y contrast() Dale a los elementos un efecto colorido y demasiado vívido.

.dramatic {
  filter: saturate(180%) contrast(120%);
}

…mientras que el contraste ligeramente aumentado y la saturación más baja ayudan a mejorar el efecto sepia de rango medio, lo que da como resultado un efecto de filtro retro:

.vintage {
  filter: saturate(60%) sepia(40%) contrast(110%);
}

En algo así como un fondo, podemos usar baja saturate() y brightness() valor para reducir el color y el brillo de la imagen de fondo, y blur(4px) para reducir su visibilidad.

.background {
  filter: saturate(50%) brightness(60%) blur(4px);
}

Vea cada ejemplo en la demostración a continuación:

Ejemplo: fondo de vista previa de música

Además de los filtros de imagen individuales, también podemos utilizar saturate() Funciones y casos más prácticos. Por ejemplo, podemos recrear la vista previa de aplicaciones de música como Spotify o Apple Music usando el siguiente comando saturate() + Otros filtros CSS:

.music-bg img {
  filter: blur(30px) saturate(200%) brightness(60%);
}

A pesar de blur() y brightness() Los filtros suavizan y oscurecen el fondo, saturate() El filtro realza su color, haciéndolo claramente visible.

Cambia al “modo vívido” y lo notarás saturate(200%) Es necesario evitar que el color de fondo luzca apagado y descolorido.

Ejemplo: imagen de tarjeta de película

Imaginemos que estamos creando una aplicación de películas. Entonces, deberíamos tener una sección para mostrar películas nuevas y próximas. Para mantener todos los carteles de películas en el mismo tono vívido podemos utilizar saturate() Función para aumentar la pureza de los colores del cartel (junto con algunos otros filtros) y darle más vitalidad.

.movie-card img {
  filter: contrast(130%) saturate(140%) sepia(20%);
}

Un contraste ligeramente mayor diferencia aún más los puntos oscuros y brillantes, mientras que el sepia bajo añade calidez.

Navegador aplicable Filtrar imágenes en el orden declarado..

Nuevamente, podemos alternar el interruptor Aumentar saturación para ver cómo se vería la imagen usando otros filtros sin aumentar la saturación.

usar saturate() y backdrop-filter

Mientras que la propiedad de filtro aplica saturación al elemento mismo, backdrop-filter La propiedad aplica el filtro al área detrás de él.

Un buen ejemplo de esta combinación es el cursor “color pop”. Es un elemento flotante que se mueve con el mouse, saturando solo la porción de la imagen de fondo que cubre.

Primero, necesitamos algo de JavaScript para obtener las coordenadas del cursor en CSS:

const cursor = document.getElementById("cursor");

window.addEventListener("mousemove", (e) => {
    cursor.style.left = e.clientX + "px";
    cursor.style.top = e.clientY + "px";
});

Y primero reduzca la saturación de la imagen de fondo.

img {
    filter: saturate(30%) brightness(80%);
}

Esto permite un efecto emergente cuando el usuario coloca el foco sobre parte del fondo.

.cursor {
    backdrop-filter: saturate(400%) contrast(110%);
}

Al pasar el cursor, el área del cursor se sobresatura, lo que hace que los colores sean más vívidos.

Especificación

CSS saturate() Las funciones se definen dentro de otras funciones de filtro. Módulo de efectos de filtro 1 Especificación, actualmente en borrador editorial.

Soporte del navegador

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

Importante