Los filtros en CSS son excelente herramientas para poner efectos a las imagenes de una pagina web, Vamos a cubrir los efectos de CSS con algunos ejemplos.
Que es un filtro exactamente ? La forma mas facil de entender un filtro , es como un paso de post-proceso magico que hace cosas hermosas en el contenido de la pagina web.
Si no puedes ver los efectos que se aplican en las imagenes es por que solo funciona en google-chrome por ser esta caracteristica parte de CSS3.
Los filtro que podemos Usar
Son varios los tipos de filtros que podemos usar en nuestras paginas web y cada uno con funciones diferentes que le pueden dar un toque mas especial a nuestros dise~os.
+ grayscale(porcentaje)
+ sepia(porcentaje)
+ saturate(porcentaje)
+ hue-rotate(angulo)
+ invert(porcentaje)
+ optacity(porcentaje)
+ brightness(porcentaje)
+ contrast(porcentaje)
+ blur(radio)
Aplicando Filtros
La mayoria de los filtros CSS que podemos usar funcionaran sobre google-chrome y firefox para la practica online usaremos la imagen situada aqui http://www.ecologiaverde.com/wp-content/2009/02/paisaje_12.jpg
GrayScale
El primer ejemplo es de grayscale vamos a ver :
<img src="http://www.ecologiaverde.com/wp-content/2009/02/paisaje_12.jpg" style="width : 400px; -webkit-filter : grayscale(100%);">
la imagen original :
el reslutado es :
Sepia
El efecto sepia aveces es muy usado por fotografos y agrega otro tipo de ambiente a la imagen ejemplo :
<img src="http://www.ecologiaverde.com/wp-content/2009/02/paisaje_12.jpg" style="width : 400px; -webkit-filter : sepia(100%);">
la imagen original :
el resultado de sepia al 100% es :
Notar que es muy diferente que usar el filtro de grayscale por que el sepia le agrega un tono rojizo a la imagen y el grayscale solo le quita los colores y lo deja en grises …
Saturate
La unidad del saturate no es precisamente el porcentaje simplemente podemos usar un numero entero simplemente y ver como la saturacion de color en la imagen cambia… en este ejemplo usamos una saturacion de 10 … saturate(10) :
<img src="http://www.ecologiaverde.com/wp-content/2009/02/paisaje_12.jpg" style="width : 400px; -webkit-filter : saturate(10);">
la imagen original :
el resultado de saturate 10 es :
Se puede variar el numero entero hasta conseguir la saturacion deseada … como observacion, si en vez del numero entero se utiliza un porcentaje , si el porcentaje es menor que 100% se reducira el color de la imagen y 100% sera la misma saturacion de la imagen.
Invert
Este filtro invierte los colores de la imagen dependiendo del porcentaje , en este ejemplo le ponemos invert(100%)
<img src="http://www.ecologiaverde.com/wp-content/2009/02/paisaje_12.jpg" style="width : 400px; -webkit-filter : invert(100%);">
la imagen original :
el resultado de invert(100%) es :
Contrast
Aqui aplicamos contrast(200%)
<img src="http://www.ecologiaverde.com/wp-content/2009/02/paisaje_12.jpg" style="width : 400px; -webkit-filter : contrast(200%);">
la imagen original :
el resultado de contrast(200%) es :
Blur
Aqui aplicamos blur(10px) esto hara un efecto de desvanecimiento :
<img src="http://www.ecologiaverde.com/wp-content/2009/02/paisaje_12.jpg" style="width : 400px; -webkit-filter : blur(10px);">
la imagen original :
el resultado de blur(10px) es :
Todo esto ya viene en el navegador por lo que no hay que agregar nada mas y cuidar que el navegador sea chrome o firefox , para esta pagina solo funcionara en chrome pues use el prefijo webkit , para poder verlo en firefox se tendria que usar el prefijo moz.
