Fondos desenfocados con CSS3

Fondos desenfocados con CSS3

Diseño

Este efecto (como se ve en la imagen del post) es muy simple de lograr, y permite agregar color e imágenes a nuestro sitio sin afectar la performance.

El truco consiste en aplicar el efecto de desenfoque a una versión muy pequeña de la imagen que realmente queremos, y estirarla para que ocupe todo el espacio. Por ejemplo, en lugar de usar una imagen de 1024×768, usamos una de 40×30.

Usamos esto: Fondos Desenfocados con CSS3 en lugar de esto otro:Fondos Desenfocados con CSS3

Con CSS estiramos la imagen, agregamos un filtro blur, y ya estamos listos:

.background-image {
  /* Estilos para el desenfoque */
  background-image: url('http://lorempixel.com/40/30/nature/3/');
  background-size: cover;
  filter: blur(25px);

  /* Estilos para el tamaño (para usar como imagen de fondo) */
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

Podemos usar esta misma técnica para un efecto similar al de medium.com, mostrando las versiones desenfocadas de las imágenes hasta cargar las que están en HD, con mínimas variantes (en el ejemplo, la versión HD se carga haciendo click la imagen):

Sobre el autor:

Desarrollador web freelance.

Dejá un comentario

*