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.

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR