5
Mar 2013

Filtros en
CSS

Los filtros en CSS, como su nombre lo indica, nos permiten aplicar filtros a elementos de nuestra página, similares a algunos que nos permiten realizar aplicaciones de diseño gráfico. Pero, ¿para qué aplicar filtros desde una hoja de estilo a una imagen si puedo crear un elemento con el filtro y utilizarlo? Cierto, si el elemento no sufrirá ningún cambio con la interacción del usuario una imagen con un filtro desde Photoshop hace el trabajo.

difuminado

Y qué si nuestra interfaz requiere de un elemento que al pasar el cursor sobre ella esta tenga otra tonalidad, podemos cambiarla por otra en el evento “mouseover”, pero recordemos que lo importante es optimizar el rendimiento de nuestro sitio y minimizar el número de peticiones a nuestro servidor. También podemos optar por utilizar sprites y generar una mosaico con nuestras imágenes normales y las que tienen filtro, ¿y si las imágenes son demasiado grandes? ¿Resultará eficiente tener ese mosaico?

Los filtros aplican una capa sobre los elementos seleccionados y manipulan los pixeles en el área correspondiente, y permiten aplicar más de un efecto a la vez sobre un elemento. Hay que tener en cuenta que el uso de ellos consume un poco más de tiempo en el procesamiento de la página, pero si se usa adecuadamente no debe afectar la velocidad del sitio.

¿Cómo se utilizan?

La sintaxis es simple:

“selector” { filter: “filtro a aplicar”( “valor en porcentaje/grados/pixeles” ) }

Si se requiere aplicar más de un filtro, simplemente se separan por un espacio:

“selector” { filter: “ primer filtro”( “valor en porcentaje”  “segundo filtro”( “valor en porcentaje” )) }

Cuando se aplican dos o más filtros, hay que tener en cuenta que se respeta el orden en que se declaran, por lo cual es importante prestar atención para lograr el efecto adecuado. Por ejemplo,  estos filtros producirían resultados diferentes a pesar de tener los mismos valores:

img  sepia{

-webkit-filter:  grayscale(100%) sepia(100%)

}

Img grises {

-webkit-filter:  sepia(100%) grayscale(100%)

}

grisas-y-sepiaSepia con escala de grises (izquierda) y escala de grises con sepia (derecha).

Para estos casos, el orden de los factores si altera el producto, ya que en el primero se aplica un filtro de sepia y a esta se aplica un filtro de escala de grises, mientras en el segundo al filtro de escala de grises se le aplica un filtro sepia. Por lo cual la diferencia es evidente.

Los filtros disponibles en CSS son los siguientes:

Escala de grises

Sintaxis : grayscale ( porcentaje )

Convierte los colores a matices de gris, puede tomar valores porcentuales o de punto decimal, acepta parámetros entre 0 a 100 porcentual y 0.0 a 1, es decir, un valor de 50% o .5 es aceptado y producen el efecto similar. Los valores de punto decimal son recomendados si se requiere más precisión en el filtro.

escaladegrises

Sepia

Sintaxis: sepia (porcentaje)

Este filtro convierte los colores a tonalidades de café. Recibe los mismos parámetros que la escala de grises.

o-sepia

Extracción de colores

Sintaxis: hue-rotate(ángulo)

Este filtro cambia los colores del elemento, los parámetros los recibe en ángulos (deg), de manera que el valor asignado se relaciona con una rueda de colores, la cual es girada y los colores del elemento original son cambiados por los valores que se encuentren en el ángulo de la rueda.

o-hue

Saturación

Sintaxis: saturate(porcentaje)

Este filtro cambia el matiz de colores para incrementar la tonalidad  y lograr elementos más vivos e intensos. Recibe parámetros en porcetajes, y permite valores arriba del 100%.

o-saturar

Opacidad

Sintaxis: opacity(porcentaje)

Permite aplicar un filtro para que los elementos sean semi transparentes, toma valores desde 0 a 100, donde 0 hace desaparecer el objeto y 100 no aplica opacidad alguna. A pesar de tener un elemento con opacidad 0, este responde a eventos accionados por el ratón.

o-opacidad

Invertir colores

Sintaxis: invert (porcentaje)

Este filtro invierte los colores del elemento, para lograr un efecto similar a los negativos de un rollo fotográfico, recibe parámetros similares a la escala de grises.

o-invertir

Brillo

Sintaxis: brightness (porcentaje)

Este filtro incrementa o reduce el brillo de los colores del elemento, para valores inferiores al 100% el brillo disminuye, y valores superiores incremente el brillo de la imagen.

o-brillo

Contraste

Sintaxis: contrast (porcenaje)

Permite agustrar la diferencia entre tonos oscuros y luminosos, permite valores superiores al 100%.

o-contraste

Difuminado

Sintaxis: blur (radio de difuminado)

Este filtro difumina los colores en el elemento, reciba valores en pixeles los cuales determinan cuantos pixeles en la pantalla se licuaran con otros, logrando un efecto similar a mirar a través de un cristal. Mientras mayor sea el valor asignado, se perderá claridad y nitidez en la imagen.

o-difuminar

Sombra

Sintaxis: drop-shadow( “posiciones” “color de sombra”)

Este filtro es similar a la propiedad box-shadow, que nos permite agregar sombras bajo los elementos, con la diferencia de que aplica sombra al conjunto y respeta las transparencias dentro de una imagen PNG (la mejor manera de aplicar sombras). Recibe 4 parámetros, 2 para indicar la posición, otro para el difuminado de la sombra y el último para determinar el color.

sombra

Dependiendo del tamaño de las imágenes estos filtros requerirán mayor tiempo de procesamiento para realizarse, por lo cual es conveniente analizar en qué situaciones son realmente necesarios. La mala noticia sobre estas herramientas es el soporte que tienen en los navegadores.

Actualmente Chrome es el navegador que soporta todos, seguido por Safari  y Firefox, aunque con Firefox se maneja una sintaxis diferente, ya que hay que agregar el filtro referenciado con una URL y el elementro que querramos aplicarle el filtro, dentro de una etiqueta filter.

filter { filter: url(#foo); sepia(80%)}

De momento ni Opera ni IE soportan estas propiedades, aunque posiblemente en la siguiente versión de Opera sea posible usar filtros, ya que este navegador cambiara su motor Presto por Webkit, el mismo que usa Chrome y Safari. Dejando a IE como el último, de nuevo.

Esperamos que esto les sea de utilidad, pueden ver el código y los ejemplos en este link, jueguen con los parametros para que se familiaricen con cada propiedad. De preferencia usen Chrome, porque si no los filtros no se apreciaran correctamente.

Por: Arturo Tadeo / Diseño web

Comments are closed.

DOTTO