Efecto de filtro de fondo con CSS

 

 

 

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

¿El enfoque? Pan comido:

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

Vale la pena examinar los comentarios de la publicación porque abordan la compatibilidad con varios navegadores. La verdad es que la cobertura es bastante buena. Caniuse muestra una cobertura global del 83% con Firefox (y, como era de esperar, Internet Explorer) sin 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);}

Lindo. Pero podemos ir un poco más allá agregando algo @supportsallí, como se demuestra en nuestra background-filterentrada del 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 el -webkitprefijo allí. Todavía vale la pena usarlo en producción, aunque eso no es gran cosa suponiendo que esté conectado con Autoprefixer. Aquí está la demostración del Almanaque:

 

Bien, tal vez no sea la solución de una sola línea que parecía ser. Pero bueno, es genial que este tipo de cosas sean relativamente triviales en CSS. Cambiar bañera por plato de ducha | Mamparas - Bricoducha

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Efecto de filtro de fondo con CSS

Efecto de filtro de fondo con CSS

Me encantan estas pequeñas publicaciones en las que algunos diseños aparentemente complicados se resuelven con una sola línea de CSS utilizando una propieda

programar

es

https://pseint.es/static/images/programar-efecto-de-filtro-de-fondo-con-css-1607-0.jpg

2024-06-13

 

Efecto de filtro de fondo con CSS
Efecto de filtro de fondo con CSS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences