Filtros en CSS3

Desde la llegada de CSS3 hemos tenido una nueva variedad de características que nos han permitido enriquecer la vida de las páginas internet como son los bordes redondeados, las sombras, degradados, animaciones, etc. 

Todos ellos nos han permitido tener un sitio web mucho más amistoso y que genere una mejor interfaz de usuario.

Entre las propiedades una de las que más destaca son los filtros, estos nos dan la capacidad de aplicarle efectos a las imágenes como opacidad y desenfoque.  En este artículo te mostrare como trabajar con ellos.

Cabe mencionar que los filtros no son totalmente compatibles con todos los navegadores, en la mayoría hay que usar prefijos.

Sintaxis

Aunque todos los filtros tienen diferentes funcionalidades su sintaxis es la misma:

1.       del fichero pegar lo siguiente:

    .filtro {

         filter: <filter-function> [<filter-function>]* | none

    }               

Un ejemplo práctico de aplicar un filtro a una imagen:

HTML

    <img class="blur" src="imagen.jpg" />

CSS

    .blur {

         -webkit-filter: contrast(1.5); /* 1.5 = 150% */

         filter: contrast(1.5);

    }  

Ahora te mostrare una lista de los filtros que podemos utilizar en nuestras páginas:

Contrast

Ajusta el contraste de nuestra imagen dependiendo del valor que le asignemos, el valor proporcionado corresponde a un porciento en el ejemplo debajo 1.5 = 150%.

Ej:

    .filtro {

         -webkit-filter: contrast(1.5);

         filter: contrast(1.5);

    }

Hue-rotate

Se aplica una rotación de matriz en la imagen. El valor define el número de grados alrededor del círculo de color. (360deg. valor máximo).

Ej:

    .filtro {

         -webkit-filter: hue-rotate(180deg);

         filter: hue-rotate(180deg);

    }

Sepia

Convierte una imagen a sepia. Entre más grande el valor proporcionado más se va a ver el efecto.

Ej:

    .filtro {

         -webkit-filter: sepia(1);

         filter: sepia(1);

    }

Saturate

Aplica saturación a una imagen.

Ej:

    .filtro {

         -webkit-filter: saturate(3);

         filter: saturate(3);

    }

Opacity

Aplica transparencia a una imagen. Este filtro se comporta similar a la propiedad opacity la diferencia es que, con los filtros, algunos navegadores ofrecen la aceleración de hardware para mejorar el rendimiento.

Ej:

    .filtro {

         -webkit-filter: opacity(0.3);

         filter: opacity(0.3);

    }

Invert

Invierte los colores de una imagen. Un valor de 100% sería totalmente invertido.

Ej:

    .filtro {

         -webkit-filter: invert(1);

         filter: invert(1);

    }

Grayscale

Aplica un efecto de escala de grises. El valor define la proporción de la conversión; mientras más grande sea el valor, más gris va a ser (100% valor máximo).

Ej:

    .filtro {

         -webkit-filter: grayscale(1);

         filter: grayscale(1);   

    }

Drop-shadow

Aplica un efecto de sombra a la imagen y acepta el parámetro de fondos definido por CSS3. Este filtro es similar a la propiedad box-shadow la diferencia es que, con filtros, algunos navegadores ofrecen la aceleración de hardware para mejorar el rendimiento.

Ej:

    .filtro {

         - webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9));

         filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9));

    }

Blur

Da un desenfoque gaussiano. El valor define cuántos pixeles en la pantalla se mezclan entre sí. Entre más grande el valor más borroso va a ser.

Ej:

    .filtro {

         -webkit-filter: blur(2px);

         filter: blur(2px);

    }

De manera general esta es la forma de utilizar los filtros así lograremos darles mayor calidad visual a nuestros sitios.

Espero les haya servido de ayuda.