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 hackeos o soluciones menos que perfectos. En los últimos años, Safari y Edge proporcionaron estas capacidades a través de la propiedad background-filter (y, alternativamente, -webkit-backdrop-filter), que combina dinámicamente los colores de primer plano y segundo plano según 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 admite 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 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 se admitiera 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 a lo que aplicarle el desenfoque. 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 quieres usar una imagen externa como filtro, así como las palabras clave none, inherit, initial y unset. En MDN, se explica todo esto, incluidas las descripciones de sintaxis, los filtros y los valores.
Cuando se configura backdrop-filter en un valor distinto de none, el navegador crea un contexto de apilamiento nuevo. 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 lograr efectos ingeniosos y enriquecidos, o bien usar uno solo para lograr efectos más precisos o sutiles. Incluso puedes combinarlos con filtros SVG.
Ejemplos
Los estilos y las técnicas de diseño que antes se reservaban para los sistemas operativos ahora tienen un buen rendimiento y se pueden lograr con una sola declaración de CSS. Veamos algunos ejemplos.
Filtro único
En el siguiente ejemplo, se logra el efecto polarizado combinando 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á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 está animado detrás de ellos.
Superposiciones
En este ejemplo, se muestra cómo desenfocar un fondo semitransparente para hacer 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 del texto en 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 el fondo a pesar de lo que suceda 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 claramente marcó esta función de CSS como muy esperada. La versión 76 de backdrop-filter de Chrome lleva a la Web un paso más cerca de ofrecer presentaciones de IU realmente similares al SO.