Agregar efecto Sepia a una imagen con CSS3

Anteriormente vimos el efecto para decolorar una imagen y dejarla en escala de grises, ahora te enseñaremos la manera sencilla de agregarle el filtro de sepia a una imagen.

La opción es sepia(porcentaje) donde el porcentaje es que tanto quieres que el filtro actue.

-webkit-filter: sepia(porcentaje); /* Chrome - Safari */
-moz-filter: sepia(porcentaje); /* Firefox */
-ms-filter: sepia(porcentaje); /* IE9 */
-o-filter: sepia(porcentaje); /* Opera */

El ejemplo lo realizaremos con esta imagen http://www.mundonets.com/images/paisaje-rural-hd.jpg

Le agregamos el estilo: style=" -webkit-filter : sepia(100%);-moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: sepia(100%); "

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 : sepia(100%);-moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: sepia(100%); ">

Esta es la imagen original:



Este es el resultado con el efecto: