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 transparencia, el desenfoque y otros efectos son formas útiles de crear profundidad y, al mismo tiempo, mantener 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é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, lo que cambia la apariencia de todo lo que está detrás de él.
• El elemento superpuesto debe ser, al menos, parcialmente transparente.
• El elemento superpuesto obtendrá un nuevo contexto de apilamiento.

Precaución: backdrop-filter puede perjudicar 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 comprenderlo, observa 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. 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 aplicar el desenfoque. No hace falta decir que, si opacity se establece en 1 (totalmente opaco), no habrá 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. En MDN, encontrarás explicaciones sobre todo esto, incluidas descripciones de la sintaxis, los filtros y los 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 elementos secundarios de posición absoluta y fija.

Puedes combinar filtros para obtener efectos ricos y elegantes, 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 son eficientes y se pueden lograr con una sola declaración de CSS. Veamos algunos ejemplos.

Filtro único

En el siguiente ejemplo, se combina el color y la desenfoque para lograr el efecto esmerilado. 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 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;
}

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 en Chrome 76 acerca a la Web un paso más a la presentación de una IU realmente similar a un SO.

Recursos adicionales

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