Cree fondos al estilo del sistema operativo con los filtros de fondo
Difuminado y cambio de color detrás de un elemento
La translucidez, el desenfoque y otros efectos son formas útiles de crear profundidad mientras se mantiene el contexto del contenido de fondo. Admiten una gran cantidad de casos de uso, como vidrio esmerilado, superposiciones de video, encabezados de navegación translúcidos, censura de imágenes inapropiadas, carga de imágenes, etc. Puede reconocer estos efectos en dos sistemas operativos populares: Windows 10 e iOS.
Históricamente, estas técnicas eran difíciles de implementar en la web, además requerían trucos o soluciones menos que perfectos. En los últimos años, tanto Safari como Edge han proporcionado estas capacidades mediante la propiedad background-filter (y alternativamente, mediante la propiedad -webkit-backdrop-filter), que combina dinámicamente los colores de primer plano y de fondo según las funciones de filtro. Ahora Chrome admite background-filter a partir de la versión 76.
backdrop-filter. Pruebe el ejemplo en CodePen.Aspectos básicos #
- La propiedad
backdrop-filteraplica uno o más filtros a un elemento, para cambiar la apariencia de cualquier cosa detrás del elemento. - El elemento de superposición debe ser al menos parcialmente transparente.
- El elemento superpuesto obtendrá un nuevo contexto de apilamiento.
La propiedad backdrop-filter de CSS aplica uno o más efectos a un elemento que es translúcido o transparente. Para entender eso, considere las imágenes a continuación.
No foreground transparency
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
Foreground transparency
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
La imagen de la izquierda muestra cómo se renderizarían los elementos superpuestos si no se utilizara o admitiera backdrop-filter. La imagen de la derecha aplica un efecto de desenfoque mediante backdrop-filter. Tenga en cuenta que utiliza opacity además de backdrop-filter. Sin opacity, no habría nada a lo que aplicar el desenfoque. Casi no hace falta decir que si opacity se establece en 1 (totalmente opaco) no habrá ningún efecto en el fondo.
La propiedad backdrop-filter es similar a los filtros de CSS en el sentido de que admite todas sus funciones de filtro favoritas: blur(), brightness(), contrast(), opacity(), drop-shadow(), etc. También es compatible con la función url() si desea utilizar una imagen externa como el filtro, así como también las palabras clave none, inherit, initial y unset. Se ofrecen explicaciones para todo esto en MDN, incluidas las descripciones de sintaxis, filtros y valores.
Cuando backdrop-filter se establece en cualquier otro valor distinto a none, el navegador crea un nuevo contexto de apilamiento. También se puede crear un bloque contenedor, pero solo si el elemento tiene descendientes de posición absoluta y fija.
Puede combinar filtros para obtener efectos enriquecidos e inteligentes, o usar solo un filtro para obtener efectos más sutiles o precisos. Incluso puede combinarlos con filtros SVG.
Detección de funciones y plan B #
Al igual que con muchas funciones de la web moderna, querrá saber si el navegador del usuario admite backdrop-filter antes de usarlo. Hágalo con @supports(). Por motivos de rendimiento, recurra a una imagen en lugar de un polyfill cuando backdrop-filter no sea compatible. El siguiente ejemplo lo ilustra.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}Ejemplos #
Las técnicas y estilos de diseño que antes estaban reservados para los sistemas operativos ahora son eficaces y alcanzables con una sola declaración CSS. Veamos algunos ejemplos.
Filtro único #
En el siguiente ejemplo, el efecto escarchado se logra al combinar color y desenfoque. backdrop-filter proporciona el desenfoque, mientras que el color proviene del color de fondo semitransparente del elemento.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}Varios filtros #
A veces, necesitará varios filtros para lograr el efecto deseado. Para hacer esto, proporcione una lista de filtros separados por un espacio. Por ejemplo:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}En el siguiente ejemplo, cada uno de los cuatro paneles tiene una combinación diferente de filtros de fondo, mientras que detrás de ellos se anima el mismo conjunto de formas.
Superposiciones #
Este ejemplo muestra cómo desenfocar un fondo semitransparente para que el texto sea legible mientras se combina estilísticamente con el fondo de una página.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}Contraste de texto sobre fondos dinámicos #
Como se indicó anteriormente, backdrop-filter permite efectos de rendimiento que serían difíciles o imposibles en la web. Un ejemplo de esto es cambiar un fondo en respuesta a una animación. En este ejemplo, backdrop-filter mantiene el alto contraste entre el texto y su fondo a pesar de lo que sucede detrás del texto. Comienza con el color de fondo predeterminado darkslategray y usa backdrop-filter para invertir los colores después de la transformación.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}Conclusión #
Más de 560 de ustedes votaron a favor del error de Chromium en los últimos años, lo que marca claramente esto como una característica CSS largamente esperada. El lanzamiento de backdrop-filter en la versión 76 de Chrome acerca a la web a una presentación de interfaz de usuario verdaderamente similar a la de un sistema operativo.
Recursos adicionales #
- Especificación
- Estado de la plataforma Chrome
- MDN
background-filteren CSS Tricks- Muestras en Codepen