Crea fondos con el estilo del SO con el filtro de fondo

Desenfoque y cambio de color detrás de un elemento.

Adam Argyle

Joe Medley

La translucidez, el difuminado y otros efectos son maneras útiles de crear profundidad y mantener el contexto del contenido del 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étera. Es posible que reconozcas estos efectos de dos sistemas operativos populares: iOS y Windows 10.

Ejemplo de un efecto de vidrio esmerilado. Fuente.

Históricamente, estas técnicas eran difíciles de implementar en la Web y requerían trucos o soluciones alternativas poco perfectos. En los últimos años, Safari y Edge proporcionaron estas funciones a través de la propiedad background-filter (o, de manera alternativa, -webkit-backdrop-filter), que combina de forma dinámica los colores de primer y segundo plano en función de las funciones de filtro. Ahora Chrome admite background-filter a partir de la versión 76.

Una demostración de las funciones de filtro para backdrop-filter Prueba el ejemplo en CodePen.

Navegadores compatibles

Navegadores compatibles

• 76
• (79)
• 103
• (18)

Origen

Por motivos de rendimiento, recurre a una imagen en lugar de un polyfill cuando backdrop-filter no sea compatible. 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-filter aplica 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 apilamiento.

Precaución: backdrop-filter puede dañar el rendimiento. Pruébala antes de implementarla.

CSS backdrop-filter aplica uno o más efectos a un elemento que es translúcido o transparente. Para entenderlo, considera las siguientes imágenes.

Sin transparencia en primer plano

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

Transparencia en primer plano

.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. La imagen de la derecha 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 admite 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 un 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 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 realizar 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);
}

Prueba este ejemplo en CodePen.

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.

Prueba este ejemplo en CodePen.

Superposiciones

En este ejemplo, se muestra cómo desenfocar un fondo semitransparente para que el texto sea legible y, al mismo tiempo, se combine con el fondo de una página en términos de estilo.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Prueba este ejemplo por ti mismo.

Contraste del texto en fondos dinámicos

Como se indicó anteriormente, backdrop-filter permite efectos de alto rendimiento que serían difíciles o imposibles de lograr 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;
}

Prueba este ejemplo de Chen Hui Jing en Codrops.

Conclusión

Más de 560 personas votaron a favor del error de Chromium en los últimos años, lo que claramente la marca como 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.

Recursos adicionales

• Especificación
• Estado de la plataforma Chrome
• MDN
• background-filter en CSS Tricks
• Muestras en Codepen