Probando Backdrop Filter

Seguramente en algún momento has querido lograr un efecto como el de la imagen de inicio con tu CSS, seguramente lo primero que piensas es agregarle un filter: blur() a tu contenedor pero descubres que no funciona 😫.

Luego de este intento empiezas a buscar y descubres que hay una forma de hacerlo con filter pero para lograrlo debes de realizar un proceso que requiere agregar más elementos de los que realmente necesitas.

Pero gracias a Dios ahora podemos usar backdrop-filter! Esta propiedad nos permite aplicar el efecto gráfico a los elementos que sen encuentran detrás del elemento al que le configuremos la propiedad.

Esta sería la sintaxis:

.element {
  backdrop-filter: <filter-function> [<filter-function>]* | none
}

Y estas serían las funciones de filtro (<filter-function>) que podríamos pasarle:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() – (for applying SVG filters)

Aquí les dejo un pequeño experimento que realice con esta propiedad y espero puedan hacer uso de esta interesante propiedad en sus proyectos.

En temas de compatibilidad con navegadores solo nos falta el soporte en Firefox, pero seguramente muy pronto lo veremos soportado, aquí les dejo la info de caniuse.

Muchas gracias por tomarte el tiempo de leer mi primer post y espero que este tip té sea útil, pronto compartiré un nuevo tip.