estadisticas
 
 
A continuación veremos un pequeño tutorial donde aprenderemos a agregar el efecto saturado a una imagen utilizando CS3, recordemos que este efecto solo será visual y la imagen en realidad no cambiara.
 
Efecto Saturado a una imagen con CSS3
Ya hemos visto algunos efectos como efecto en escala de grises y efecto Sepia en una imagen, veremos cómo agregar el efecto de saturado a una imagen.
 
Saturate(Unidad)
 
La unidad del saturate no es en porcentaje simplemente podemos usar un numero entero y ver como la saturación de color en la imagen cambia, en esta ocasión usaremos una saturación de 10, saturate(10) :
 
La opción es saturate(10).

-webkit-filter: saturate(10);  /* Chrome - Safari */
-moz-filter: saturate(10);  /* Firefox */
-ms-filter: saturate(10); /* IE9 */
-o-filter: saturate(10);  /* Opera */
 
El ejemplo lo realizaremos con la siguiente imagen http://www.mundonets.com/images/paisaje-rural-hd.jpg
 
Le agregamos el estilo: style=" -webkit-filter : saturate(10);-moz-filter: saturate(10); -ms-filter: saturate(10); -o-filter: saturate(10);   "
 
El código de la imagen quedaría asi:
 
<img src="http://www.mundonets.com/images/paisaje-rural-hd.jpg" style="width : 400px; -webkit-filter : saturate(10);-moz-filter: saturate(10%); -ms-filter: saturate(10); -o-filter: saturate(10);   ">
 
Esta es la imagen original:
 

 
Este es el resultado con el efecto:
 
 
 

Escribir un comentario

Nota: Los comentarios escritos en mayúsculas o tipo SMS serán eliminados, al igual que los comentarios ofensivos o sin educación contra los lectores y/o editores de este medio.

También pueden reportar los comentarios ofensivos para ser borrados.

Código de seguridad
Refescar