El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos

20-01-2014 - Andrés Cruz

Con solo CSS podemos crear efectos sobre nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp; como explicamos en un artículo anterior Filtros en CSS3; en éste artículo veremos un filtro en especifico blur; este filtro; como su nombre indica; permite realizar un desenfoque o difuminado a nuestros elementos HTML -Imágenes, texto, contenedores, entre otros-; en este artículo veremos alguno de sus posibles usos de este particular filtro; recordemos que existe vários filtros que ya tocamos en una anterior entrada:

Filtros en CSS3

¿Cómo funciona el filtro blur?

Recordando su funcionamiento; el filtro consiste en emplear la propiedad dada generalmente en pixeles para aplicar un desenfoque en nuestro elemento:

  filter: blur(6px);

Por supuesto, existen muchos otros filtros, a saber :grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, y invert; pero; en este artículo el filtro de interés es el blur.

Comencemos con los ejemplos...

Difuminando nuestras imágenes con el filtro blur

El más obvio de todos, consiste en aplicarle un desenfoque o difuminado a nuestras imágenes:

img {
  filter: blur(6px);
}

imagen filtro desenfoque

Otro posible uso podría ser activar el desenfoque al pasar el cursor por encima de la imagen en cuestión; y esto lo logramos utilizando el selector :hover.

img:hover {
  filter: blur(6px);
}

imagen filtro desenfoque

Resaltando ciertos elementos con el efecto blur

Este tercer ejemplo es un poco más interesante; les mostraremos como crear un simple efecto blur sobre cajas de texto (tag div con algún contenido) las cuales llamaremos 'ítems'; básicamente los ítems serán escalados y se les aplicará el filtro de desenfoque ya visto en los ejemplos anteriores; además usaremos transiciones para 'suavizar' el pasar de un estado a otro y un código jQuery para aplicarle la respectiva clase de desenfoque (blur) a ciertos ítems.

La idea en general es posicionarse sobre una ítem (hover), entonces este ítem se escalará a un tamaño mayor; a la par, desenfocaremos todos las demás ítems no seleccionados y los escalaremos a un tamaño menor; con esto dará la sensación de que el ítem se superpone sobre los demás elementos y ayudaremos al usuario a centrarse en el ítem ya seleccionado.

Este es el resultado final:

¡Empecemos!

Cuerpo del documento (El HTML)

Un HTML tradicional; tenemos un tag main o principal; dentro de este tag, tendremos nuestros ítems o cajas de texto con algún contenido interesante.

    <main class="content">
        <article class="item">
            <a href="">
                <h6>Título</h6>
                <p>Texto.</p>
            </a>
        </article>

        <article class="item">
		<!-- Mas articulos -->
        </article>
    </main>

El estilo (El CSS)

Contenedor

Con esto, crearemos un contenedor de nos mas de 500px de ancho y centrado; además agregaremos un poco más de estilo, para mantener una presentación; este código es opcional, pero recomendable ya que favorece el efecto final.

.content{
max-width:500px;
width:80%;
height:auto;    
padding:20px;	
background:#CCC;
margin: 0 auto;
}

Obliga al contenedor a tomar la altura de su contenido; es decir los ítems que están dentro de él; para eso nos valemos de un pequeño truco, que es colocar un contenido (nulo -""-) antes y después del tag main.

.content:before,
.content:after {
content: "";
display: block;
clear: both;
}

Cajas de texto (Ítems)

Siguiendo con el CSS, llegamos a una de las partes interesantes del ejemplo; crearemos cajas flotantes o ítems posicionados a la izquierda, con una leve separación entre cada ítem; lo verdaderamente importante de este CSS son las transiciones con tres propiedades: sombra, escalado y el filtro blur respectivamente.

article.item{
padding:5px;
background:#FFF;
width:150px;
height:220px;
margin:0 5px 5px 0;
float: left;
box-shadow: 1px 1px 10px rgba(0,0,0,0.4);
transition:box-shadow 2s, transform 500ms, filter 500ms ease-in-out; 
}

Pero; ¿cuando se aplican esta transiciones?; las dos primeras (sombra y escalado) se aplicarán al posicionarnos sobre algún ítem de interés; es decir; cuando el ítem obtenga el evento hover.

article.item:hover{
transform: scale(1.05);
box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
}

La última transición pero no menos importante, se aplicará cuando los ítems NO seleccionados por el usuario (no hover) se les agregue la clase blur mediante JavaScript; además de que en esta clase también se aplicará un escalado, pero esta vez para reducirles un poco el tamaño.

article.blur{
filter: blur(3px);
transform: scale(0.95);
}

Los demás estilos son de fácil compresión y por lo tanto obviamos su explicación; ahora, el JavaScript.

El JavaScript

var item = $(".item");

// agrego la clase blur a todos los 'ítem' que NO sea al que le se le esta aplicando el evento 'hover'
item.hover(function() {
item.not($(this)).addClass('blur');
// al perder el foco, retiro la clase a todos los 'item'
}, function() {
item.removeClass('blur');
});

Sí, ese es todo el JavaScript que necesitaremos (¡mientras menos mejor!); este código se basa en dos etapas explicadas a continuación:

Al obtener el foco, el ítem seleccionado por el usuario, se disparará este evento, el cual agrega la clase blur a todos los ítem que no sea el que selecciono el usuario; para eso usamos la función not().
```
item.not($(this)).addClass('blur');
        
```
Al perder el foco, removemos la clase blur.
```
item.removeClass('blur');
        
```

Con solo agregar y remover la clase blur sobre los elementos de nuestro interés se ejecutará la transiciones ya explicadas en la sección de CSS; dando como resultado una interesante transición.

Conclusiones

Y eso es todo; de este último ejemplo podemos crear otros tipos de elementos para nuestra web; por ejemplo podemos emplearlo para crear un menú principal, o una galería de imágenes; es cuestión de adaptarlo a las necesidades que tengamos.

Ver demo Descargar Fuente

Blur Imagen jQuery

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy