Tutoriales para personalizar Blogger
  2. Personalización

Crear efecto Desenfoque de Fondo con CSS

Hasta el momento el efecto desenfoque no se puede aplicar con CSS, como si estuvieras aplicando sombra a un texto, pero con ayuda del CSS podemos llegar a un resultado satisfactorio.
Con ayuda de este truco podemos hacer que cualquier capa haga un desenfoque con una imagen de fondo.

Video Tutorial

Resultado Final

Paso 1

Para lograr este efecto necesitaremos dos imágenes, la primera es la que estaría como fondo de la web y la segunda es esa misma imagen de fondo pero con el efecto de desenfoque (puedes hacer el desenfoque en la imagen con cualquier programa de diseño).
Una vez tengas las dos imágenes vamos a usar los siguientes estilos:


Es muy importante que coloquemos fixed en el fondo, para que cuando hagamos scroll el fondo este quieto y tambien logramos que el fondo se coloque con relación a la ventana del navegador, y no al contenedor que tiene el fondo.


¿Tienes alguna duda?

  1. Unknown24 de noviembre de 2014, 5:22 p.m.

    hola muy buen tuto man. oye me podrías pasar los archivos para hacer unas pruebas? 

    ResponderBorrar
  2. Unknown8 de julio de 2018, 1:44 a.m.

    hola donde puedo obtener el codigo? gracias

    ResponderBorrar