Efecto de filtro de fondo con CSS | Programar Plus

Me encantan estas pequeñas publicaciones en las que un diseño de aspecto complicado se resuelve con una sola línea de CSS utilizando una propiedad poco conocida. En este caso, el diseño es un efecto de vidrio esmerilado y la propiedad CSS es backdrop-filter.

¿El enfoque? Pan comido:

.container {
  backdrop-filter: blur(10px);
}

Vale la pena analizar los comentarios en la publicación porque abordan la compatibilidad con varios navegadores. La cobertura es bastante buena. Caniuse muestra una cobertura global del 83% con Firefox (y, como era de esperar, Internet Explorer) que carece de soporte. Un comentarista ofreció una buena alternativa, junto con un pequeño ajuste que desatura el efecto:

.container {
  background: rgba(0,0,0,0.8);
  backdrop-filter: saturate(180%) blur(10px);
}

Bonito. Pero podemos llevarlo un poco más lejos rociando @supports allí, como se demuestra en nuestro background-filter Entrada de almanaque:

.container {
  background: rgba(0,0,0,0.8);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

Observe la -webkit prefijo allí. Todavía vale la pena usarlo en producción, aunque eso no es un gran problema, suponiendo que esté conectado con Autoprefixer. Aquí está la demostración del Almanaque:

Bien, tal vez no sea la solución de una línea que parecía ser. Pero bueno, es genial que este tipo de cosas sean relativamente triviales en CSS.

Enlace directo →