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
Comparte si te ha Gustado
Artículos Relacionados