Últimamente, he estado un poco obsesionado con la búsqueda de nuevas o poco conocidas propiedades y valores de CSS para jugar con un poco con ellas. Me vuelve loco el probar estas nuevas propiedades de CSS3 y verlas aplicadas en la web que estoy desarrollando. Me gusta aplicarlas, me gusta mezclarlas para ver que pasa... En fin, me encanta experimentar con estos valores para ver sus efectos. Algunas de estas propiedades son muy útiles y otras son aparentemente sólo para echarse unas risas. Los filtros de CSS suelen ser de bastante utilidad en el diseño web: escala de grises (grayscale), desenfoque (blur), sepia (sepia) y los demás filtros. Pero ¿qué hay de la inversión de color? ¿Sabías que es posible realizarlo en tu página web mediante el uso de CSS exclusivamente? Hoy te vamos a explicar detalle a detalle cómo llevarlo a cabo en tus proyectos futuros.
El CSS
El valor invert se basa en el porcentaje. Si lo establecemos al 100% invierte completamente los colores, es decir, muestra el negativo del elemento. Si lo establecemos a un 0% muestra los colores tal y como son:
.normal {
filter: invert(0%);
}
.inverted {
filter: invert(100%);
}
Puedes invertir el color de elementos individualmente o, si inviertes el document.documentElement, todo el contenido de la página se mostrará con los colores invertidos. Los valores devueltos por window.getComputedStyle(el) serán los valores CSS originales, por lo tanto, no hay manera de conseguir los verdaderos valores invertidos de las propiedades dadas.
La inversión de color es una herramienta para la accesibilidad bastante útil, a pesar de que es a menudo proporcionada por el sistema operativo del usuario o por una herramienta de terceros. Un ejemplo práctico para la utilización del valor invert puede ser el facilitar la lectura a los usuarios en la noche, aliviando la tensión del ojo al mirar la pantalla.
Espero que te haya gustado este tutorial y sepas utilizar este valor de CSS en tus futuros proyectos. Ya sabes que nos puedes proponer los tutoriales que desees que publiquemos aquí, a través de la zona de comentarios que se ubica más abajo de este texto. Además, puedes escribir tus propios tutoriales a través de la intranet de usuarios de programacion.net habilitada para ello.
Volviendo al tema de la inversión de color, ¿se te ocurre más ejemplos para poder utilizar el valor invert de CSS? A mi se me ha ocurrido el de facilitar la lectura a los usuarios, ¿y a tí? ¿se te ocurre algo más?