El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos
- 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:
¿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);
}
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);
}
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:
Realidad Aumentada con Vuforia
Vuforia es un SDK que permite construir aplicaciones basadas en la Realidad Aumentada.
Múltiples bordes en un contenedor
Múltiples fondos animados con CSS
El elemento Progress Bar HTML5
El elemento Progress Bar HTML5
Cambiando el Build Target de Android
Para cambiar el Build Target de Android de versión en Eclipse solo necesitamos hacer dos cosas.
¡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.
Acepto recibir anuncios de interes sobre este Blog.
Con solo CSS podemos crear efectos sobre nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp; en esta entrada veremos el uso básico del filtro blur o desenfoque y también veremos un ejemplo más completo para el listad
- Andrés Cruz