Del curso: CSS: 50 trucos

Accede al curso completo hoy mismo

Únete hoy para acceder a más de 24.900 cursos impartidos por expertos del sector.

Efecto de desenfoque en CSS

Efecto de desenfoque en CSS - Tutorial de CSS

Del curso: CSS: 50 trucos

Comenzar mi mes de prueba gratis Comprar para mi equipo

Efecto de desenfoque en CSS

“

CSS nos permite generar filtros de manera dinámica. Por ejemplo, yo puedo generar un desenfoque a cualquiera de los elementos que están apareciendo en pantalla. El desenfoque, o conocido como "blur", va a funcionar dentro de los elementos a los que yo se lo asigne. Por ejemplo, quiero hacer que este elemento de texto aparezca desenfocado. Sencillamente, voy acá a donde tengo esta clase de 'desenfoque' que es la que está definiendo a este contenedor, este 'div' que tengo dentro del documento, y le voy a agregar una propiedad llamada 'filter'. En este caso, estoy utilizándola con el prefijo 'webkit' y le estoy asignando un 'blur' o desenfoque de cinco píxeles. Vamos a ver el resultado y vemos que ya mi texto se ve completamente desenfocado. Ahora podemos avanzar un poco más el uso de esta propiedad 'filter' para hacer que, por ejemplo, yo puedo hacer que este texto aparezca con un fondo, vamos a ponerle acá un color de fondo, en este caso, específicamente, una imagen y quiero que veas…

Contenido