SocraTips - Backdrop-filter: qué es y cómo funciona - SocraTech

Miriam Segura, profesora del Bootcamp Full-Stack Web Developer, nos explica cómo usar la propiedad de CSS backdrop-filter para dar un efecto de cristal translúcido al fondo de un contenedor.
¡Aprende con nosotros!
socratech.es
#bootcamp #programacion #css3 #html #html5 #css #javascript #js
¡Más en nuestras redes!
Nuestro canal de KZbin: / @socratech
Whatsapp: wa.me/34623105448?text=Hola%2...!
Instagram: / socratechescuela
Twitter: / socratech_
Facebook: / socratech-106357911679909
LinkedIn: / escuela-socratech
Twitch: / socratech
EventBrite: socratech.eventbrite.es
Spotify: open.spotify.com/user/1q864u0...

[@mariacristinaulloagarrido1224]

Muy bien explicado, gracias

[@yun6967]

Excelente explicacion Miriam :D

[@SocraTech]

¡Gracias a ti por seguirnos!

[@rokenbupolecat]

no entendo por que el blur se me afecta a los textos dentro del div

[@SocraTech]

Hola Rokenbú. Te recomiendo que revises las propiedades de cada clase y dónde las estás asignando a los elementos por si se te ha colado algo. ¡Muchas gracias por seguirnos!

[@daniella2783]

Hola! excelente tutorial. Esot haciendo una página de portfolio donde necesito el filtro en dos zonas, pero una no me funciona por más que intente ¿crees que me puedas ayudar?

[@daniella2783]

.nav-menu{ top: 6rem; position: fixed; width: 100%; height: 100vh; left: 100%; transition: left 0.3s; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1rem); }

[@daniella2783]

ese es el codigo, me funciona hasta el background. Gracias por la ayuda que me puedas brindar

[@SocraTech]

Hola @@daniella2783, necesitaría un poco más de código tanto de html como de css para saber cuál es el problema. He hecho una prueba con los estilos que me has pasado e inventándome el resto y me funciona perfectamente. Te dejo por aquí el código que he generado (no se tiene por qué parecer a lo que tú estás haciendo). html: enlace enlace enlace enlace enlace css: body { background-image: url("./hojas.jpg"); background-size: cover; background-position: center; height: 100vh; } .nav-menu{ top: 6rem; position: fixed; width: 100%; height: 100vh; left: 90%; transition: left 0.3s; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1rem); } .nav-menu:hover { left: 0%; } Espero que te pueda ayudar a encontrar el fallo. Un saludo

[@daniella2783]

@@SocraTech Muchas gracias. ¿Crees que si te paso el código me puedas ayudar? lo que necesito que el fondo de un menu desplegable tenga el efecto blur. El efecto me funciona en cualquier parte del código menos en el menu

[@SocraTech]

@@daniella2783 sí, pásame un poco más de código a ver si te puedo ayudar. Un saludo