vagacode

Allá lejos y hace tiempo, cuando reinaba Internet Explorer, desde su versión 5.5, este navegador poseía una serie de características particulares que no eran sencillas de usar (y a decir verdad muy pocas personas aplicaban) pero que sus competidores modernos nunca habían intentado integrar. Una de las que en su tiempo me interesó más, fueron los llamados filtros pero claro, ¿quien iba a usar cosas así?:

filter:progid:DXImageTransform.Microsoft.Gradient(propiedades);

Debió pasar el tiempo hasta que el CSS3 comenzó a expandirse y a incluir variantes similares, más sencilla de escribir. Primero sólo se integraron en Chrome pero hoy en día, los filtros son soportados por todos ellos e incluso en dispositivos móviles.

Para quien haya utilizado algún software de edición de imágenes, será simple de entender. Los filtros permiten modificar las características visuales de cualquier elemento HTML agregando efectos que los muestran distintos a lo que son.

Esos efectos están definidos por distintas funciones con sintaxis similares. Lo más sencillo para ver cómo funciona esto es aplicarlos a una imagen y ver el resultado. Por ejemplo, empezamos con cualquier imagen; esta es la original:

La función blur() desenfoca el elemento. El valor debe expresarse en pixeles; cuanto más grande sea, más desenfocada estará la imagen:

filter: blur(valor);

blur(2px)

blur(5px)

blur(10px)

La función brightness() aclara el elemento. El valor puede ser tanto un número como un porcentaje. Si es 0% se verá totalmente negro; si es 100% el elemento no cambiará y valores superiores lo mostrarán cada vez más blanco:

filter: brightness(valor);

brightness(0.5)

brightness(3)

brightness(25)

El concepto es el mismo para todas; sólo varían el nombre de la función y el tipo de valor a utilizar.

La función contrast() modifica el contraste del elemento. Un valor de 0% lo muestra en tonos de gris; un valor de 100% no lo modifica y valores superiores aumentan el contraste. No es necesario usar porcentajes ya que pueden usarse números.

La función hue-rotate() modifica el tono o matiz de un elemento y el valor debe ser un ángulo. Si es 0 no hay cambios.

La función saturate() satura los colores y también pueden usarse números o porcentajes.

filter: contrast(porcentaje);
filter: hue-rotate(grados);
filter: saturate(porcentaje);

contrast(500%)

hue-rotate(90deg)

saturate(500%)

La función grayscale() convierte al elemento a una escala de grises y el valor define la proporción; el máximo será 100%.

La función invert() invierte los colores del elemento y el valor es un porcentaje o un número. Si es 0% no hay cambios y si es 100% la inversión es completa.

La función sepia() convierte el elemento a tonos de sepia donde el valor es un porcentaje. Si es 0% no hay cambios.

filter: grayscale(porcentaje);
filter: invert(porcentaje);
filter: sepia(porcentaje);

grayscale(100%)

invert(100%)

sepia(100%)

Seguramente, muchos saben que la transparencia (o su opuesto, la opacidad) de un elemento puede ser modificada mediante el uso de la propiedad opacity cuyo valor varía entre 0 (totalmente transparente) y 1 (totalmente opaco) pero, también hay un filtro CSS que hace algo parecido:

filter: opacity(porcentaje);

La función drop-shadow() es un filtro un poco más complejo ya que requiere varios parámetros que agregan una sombra al elemento.

Los valores de x e y establecen la posición horizontal y vertical de la sombra y pueden ser longitudes positivas o negativas; el radio define la longitud de la sombra (a mayor valor más larga); el color admite cualquier unidad de ese tipo.

filter: drop-shadow(x y radio color);

drop-shadow(2px 10px 10px #5a6a3c)

drop-shadow(2px 10px 10px #5a6a3c)

Todos los filtros pueden ser combinados separándolos con un espacio. Por ejemplo:

filter: brightness(120%) contrast(300%);

Y como son propiedades CSS como cualquier otra, pueden aplicarse a transiciones. Juguemos:

descansemos un poco

#filterdemo {
	margin: 0 auto;
	position: relative;
	text-align: center;
}
#filterdemo img {
	filter: grayscale(100%);
	margin: 0 auto;
	transition: filter 1s ease 0s;
}
#filterdemo img:hover {
	filter: grayscale(0%);
}
#filterdemo img + span {
	filter: blur(20px);
	font-size: 48px;
	left: 0;
	margin: 0;
	position: absolute;
	top: 14px;
	transition: filter 1s ease 0s;
	width: 100%;
}
#filterdemo img:hover + span {
	filter: blur(0);
}

<div id="filterdemo">
	<img src="http://i.imgur.com/S33q8fz.jpg">
	<span>descansemos un poco</span>
</div>