DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
20-01-2014

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.

¿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:

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Algunos artículos que te pueden interesar

Primeros pasos con las animaciones en CSS

Primeros pasos con las animaciones en CSS

En esta nueva entrada sobre CSS daremos los primero pasos con las animaciones en CSS; veremos como los @keyframes de CSS son fundamentales para las animaciones, entre otras cosas.

Andrés Cruz 12-01-2015

¿Cómo crear un carrusel con CSS?

¿Cómo crear un carrusel con CSS?

En esta entrada veremos cómo crear un carrusel con solo CSS, veremos un par de variación más para ejemplificar la versatilidad del código presentado empleando las Animaciones y JavaScript.

Andrés Cruz 21-09-2015

El helper para crear nuestros captchas en CodeIgniter

El helper para crear nuestros captchas en CodeIgniter

Se explica como generar y configurar captchas en CodeIgniter empleando el helper correspondiente para dicho fin, además se habla de como validar el captcha con la respuesta del usuario.

Andrés Cruz 04-12-2017