Hoy hablaremos de un efecto que normalmente solemos hacer en photoshop u en otros programas de edición de imágenes y que podemos hacer muy fácilmente utilizando un efecto de CSS puro ( y duro). Estoy hablando del efecto blur en o efecto desenfocado y lo que hace es eso, conseguir un efecto de desenfoque, que puede resultar muy útil para resaltar algún texto o algún elemento. O simplemente, queremos desenfocar una imagen porque queda más guay. Pues bien, a partir de hoy, lo sabrás hacer con CSS de forma rápida y sencilla.
Por cierto, si te gustan los efectos en CSS, te recomiendo que veas el vídeo donde explico como hacer un efecto de parallax en CSS.
Cómo hacer efecto blur (desenfocado) en CSS
Para hacer este efecto, vamos a hacer un ejemplo en html y css. Que por cierto, aunque es muy simple, me ha quedado bastante bien.
El efecto de desenfocado en CSS se hace utilizando la propiedad backdrop-filter:; y utilizando el valor blur(X);
Veamos pues cómo se puede aplicar con este ejemplo.
Parte de HTML
Preparamos un body con una imagen de fondo y en medio crearemos un recuadro con texto y utilizaremos este efecto de blur, para que se vea el fondo de este recuadro desenfocado.
<body>
<div class="wrap">
<!-- <p>Por DropCoding - David Zamora</p> -->
<h2>Efecto Blur con CSS</h2>
<p>Disfruta la fruta, la fruta tropical.</p>
</div>
</body>
Parte de CSS
Una vez tengamos hecha toda la parte de HTML empezaremos con los estilos.
Primero vamos a darle unos estilos al <body>, que es donde vamos a colocar la imagen de fondo (utilizaremos el body para ir rápido y no complicarnos mucho la vida).
body{
margin:0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: url(img/fondo.jpg) center;
background-size: cover;
}
Vamos a resetear el margin y padding por si acaso. Luego le daremos un display:flex para centrarlo, le diremos que ocupe toda la pantalla y finalmente colocaremos la imagen de fondo con un par de valores, para que se vea bien.
Ahora iremos con el recuadro y con esto ya acabamos.
Usaremos la clase que le hemos asignado al div, que es la clase .wrap y aquí es donde vamos a aplicar el efecto blur o desenfoque.
.wrap{
/* background-color: #fff; */
padding: 2rem 3rem;
text-align: center;
color: #fff;
border: 3px solid #fff;
box-shadow: 0px 0px 25px #222;
backdrop-filter: blur(10px);
}
Le hemos dado un poco de padding, hemos centrado el texto (a la gente siempre le gusta el texto centrado). Luego le hemos puesto un borde de color blanco y un efecto de sombra en CSS.
Y usamos la propiedad backdrop-filter: blur(10px); para desenfocar un poco el fondo y darle este efecto tan molón.
Si lo quieres más desenfocado (o menos), tan solo tienes que ir jugando con el valor de blur(X) y cambiar los pixeles.
Como has visto es facilito de hacer y no tienes que tirarte una hora con el photoshop para aplicar este filtro, con un par de líneas de CSS ya tenemos nuestro efecto borroso en CSS.
Si te has quedado con alguna duda o tienes alguna sugerencia, ya sabes que hacer ¡Déjamelo en los comentarios de abajo y te contestaré personalmente!
genial capo me re sirvio
Me alegro mucho!!
Va genial, gracias.
He tenido que modificar el css y añadir al inicio -webkit-:
-webkit-backdrop-filter: blur(6px);
Una duda: Lo he aplicado sin el fitele blanco y se ve un corte entre la zona enfocada y la desenfocada. ¿Se puede degradar el contorno del desenfoque para que sea progresivo y no se vea tanto el cambio de foco?
Saludos
Hola Dan, si quieres disimular un poco el corte, puedes aplicar un border del mismo color de 1px o así, es lo que a veces hago yo, un saludo!!
Muchas gracias, muy preciso y funciona 10 de 10.
Muchas gracias a ti Oscar por pasarte a comentar, un saludo!!!