Efecto Saturado a una imagen con CSS3

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.

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:

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:

Buscar con Google
Lo Ultimo!
-
Rating Colombia domingo 16 de marzo del 2025
Televisión
17 Marzo 2025 -
Rating Colombia sábado 15 de marzo del 2025
Televisión
17 Marzo 2025 -
Rating Colombia miércoles 5 de marzo del 2025
Televisión
06 Marzo 2025 -
Rating Colombia martes 4 de marzo del 2025
Televisión
06 Marzo 2025 -
Rating Colombia lunes 2 de marzo del 2025
Televisión
06 Marzo 2025 -
Rating Colombia domingo 2 de marzo del 2025
Televisión
06 Marzo 2025 -
Rating Colombia sábado 1 de marzo del 2025
Televisión
06 Marzo 2025 -
FIFA confirma espectáculo en el medio tiempo de la fin
Deportes
06 Marzo 2025 -
Rating Colombia viernes 28 de febrero del 2025
Televisión
01 Marzo 2025 -
Rating Colombia jueves 27 de febrero del 2025
Televisión
28 Febrero 2025
Dejar un comentario