Blog Reacción Estudio

¡Tu zona de aprendizaje!

Efecto desenfocado con CSS3

Efecto desenfocado con CSS3

Efecto desenfocado con CSS3

Para utilizar el efecto de desenfocado (también conocido como Blur) en CSS3 tan sólo necesitaremos unas pocas de líneas.

Este efecto se puede aplicar tanto a imágenes, como a divs y demás elementos.

 
Primero tenemos que crear el archivo blur.svg con el siguiente contenido:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

  <filter id="blur">

    <feGaussianBlur stdDeviation="3" />

  </filter>

</svg>

Y ahora en nuestro archivo CSS creamos la clase blur

.blur {
   filter: blur(3px); 
   -webkit-filter: blur(3px); 
   -moz-filter: blur(3px);
   -o-filter: blur(3px); 
   -ms-filter: blur(3px);
   filter: url(blur.svg#blur);
}

El archivo blur.svg lo tendremos que guardar en el mismo directorio donde tenemos nuestro archivo CSS.

 
Ahora ya podremos aplicar nuestra clase para desenfocar alguna fotografía u otro elemento de nuestro sitio web.