Desenfoque y cambio de color detrás de un elemento.
Históricamente, estas técnicas eran difíciles de implementar en la Web y requerían menos que hackeos o soluciones perfectos. En los últimos años, tanto Safari como Edge proporcionaron estas capacidades a través de la propiedad background-filter (y, como alternativa, -webkit-backdrop-filter), que combina dinámicamente los colores de primer plano y segundo plano en función de las funciones de filtro. Ahora Chrome admite background-filter a partir de la versión 76.
backdrop-filter. Prueba el ejemplo en CodePen.
Navegadores compatibles
Por motivos de rendimiento, recurre a una imagen en lugar de un polyfill cuando no se admita backdrop-filter. Esto se muestra en el siguiente ejemplo.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
Conceptos básicos
- La propiedad
backdrop-filteraplica uno o más filtros a un elemento y cambia el aspecto de todo lo que está detrás del elemento. - El elemento superpuesto debe ser, al menos, parcialmente transparente.
- El elemento superpuesto obtendrá un nuevo contexto de apilado.
backdrop-filter de CSS aplica uno o más efectos a un elemento que es translúcido o transparente. Para entenderlo, considera las siguientes imágenes.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
En la imagen de la izquierda, se muestra cómo se renderizarían los elementos superpuestos si no se usara o no se admitira backdrop-filter. En la imagen de la derecha, se aplica un efecto de desenfoque con backdrop-filter. Ten en cuenta que usa opacity además de backdrop-filter. Sin opacity, no habría nada para desenfocar. Casi no hace falta decir que si opacity se establece en 1 (completamente opaco), no habrá ningún efecto en el fondo.
La propiedad backdrop-filter es como los filtros de CSS, ya que se admiten todas tus funciones de filtro favoritas: blur(), brightness(), contrast(), opacity(), drop-shadow(), etcétera. También admite la función url() si deseas usar una imagen externa como filtro, así como las palabras clave none, inherit, initial y unset. Hay explicaciones para todo esto en MDN, incluidas descripciones de sintaxis, filtros y valores.
Cuando backdrop-filter se establece en cualquier valor que no sea 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.
Puedes combinar filtros para obtener efectos ingeniosos y atractivos, o usar solo uno para obtener efectos más sutiles o precisos. Incluso puedes combinarlos con los filtros SVG.
Ejemplos
Las técnicas y los estilos de diseño que antes se reservaban para los sistemas operativos ahora tienen buen rendimiento y se pueden lograr con una sola declaración de CSS. Veamos algunos ejemplos.
Filtro único
En el siguiente ejemplo, el efecto polarizado se logra combinando el color y el 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ás varios filtros para lograr el efecto deseado. Para ello, proporciona 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 el mismo conjunto de formas se anima detrás de ellos.
Superposiciones
En este ejemplo, se muestra cómo desenfocar un fondo semitransparente para que el texto resulte legible a la vez que 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 del texto en fondos dinámicos
Como se mencionó 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 indica claramente que se trata de una función de CSS muy esperada. El lanzamiento de backdrop-filter de Chrome en la versión 76 acerca la Web a una presentación de IU verdaderamente similar a la del SO.