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!
Sobre el Autor
Soy un joven entusiasta, autodidacta, Técnico en Informática, comparto mi conocimiento y deseo que los demás hagan lo mismo. Únete a mi y a la comunidad y hagamos que todos aprendan con nosotros.
