CSS: Efecto invertir colores de tu sitio web e imagenes

Siempre que busquemos, encontraremos más propiedades CSS, incluso poco conocidas pero que pueden sernos de utilidad en el momento menos pensado. Uno de los filtros CSS más interesantes es el que nos permite invertir los colores de cada elemento en la página.

El valor invert está basado en porcentajes, 100% invierte completamente los colores y 0%muestra los colores normalmente:

.normal {

filter: invert(0%);

}

.inverted {

filter: invert(100%);

}

 

Puedes invertir elementos individuales o, si inviertes el document.documentElement, el contenido de la página entera se verá invertido. Los valores serán reportados por window.getComputedStyle(el) con los valores originales del CSS (y no los invertidos).

La inversión de color es una herramienta de accesibilidad muy util, aunque usualmente es provista por el sistema operativo del usuario, o por una herramienta separada.

La inversión de colores puede ser útil por ejemplo, por la noche, para descansar la vista. Eso es todo ¡Esperamos que sea de utilidad!

VER DEMO

Valora este Artículo
CSS: Efecto invertir colores de tu sitio web e imagenes
Qué te pareció?
Sobre el Autor
Soy un joven entusiasta, me gusta aprender por mi cuenta, soy de profesión Técnico en Computación e Informática, me gusta ayudar a la gente con sus problemas informáticos, aprecio la familia... Quiero y lograré alcanzar todos mis objetivos.
Comparte si te ha Gustado
Artículos Relacionados