estadisticas
 
 
Ahora conoceremos el efectoInvert” este efecto hace que los colores de una imagen se inviertan, cuando lo aplicas podrás ver un especie de negativo de la imagen.
 
Efecto de invertir los colores a una imagen con CSS3
Entre otros efectos que hemos visto están; efecto en escala de grises, efecto Sepia en una imagen y el efecto saturado en una imagen, hoy veremos cómo agregar el efecto de “Invert” a una imagen.
 
Invert
 
Este filtro lo que hace es invertir los colores de una imagen, dependiendo del porcentaje veras el efecto, en este ejemplo le pondremos invert(100%).

-webkit-filter: invert(100%);  /* Chrome - Safari */
-moz-filter: invert(100%);  /* Firefox */
-ms-filter: invert(100%); /* IE9 */
-o-filter: invert(100%);  /* Opera */
 
El ejemplo lo realizaremos con esta imagen http://www.mundonets.com/images/paisaje-rural-hd.jpg
 
Le agregamos el estilo: style=" -webkit-filter : invert(100%);-moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(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 : invert(100%);-moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%);   ">
 
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