Una página web está hecha de dos idiomas básicos de front-end: HTML y CSS. Todos los objetos de la página web creada en el cuerpo HTML están diseñados a través del CSS. El color es una propiedad básica de CSS que se aplica a todos los objetos, ya sea en el texto o en la imagen.

La hoja de estilo CSS tiene una función incorporada que se utiliza para invertir los colores en el contenido del cuerpo HTML. Este artículo contendrá una explicación sobre la inversión del color del texto y la imagen también. La sintaxis básica de la función invertir es:

Invertir (cantidad aplicada al objeto)

Este parámetro único contiene la cantidad en el porcentaje de cuyo punto se debe hacer la inversión de colores. El valor de esta función para la imagen original es 0%. Mientras que, si el valor de la función invertir es 100%, los colores están invertidos. El valor del 50% muestra que la imagen será un color gris completamente sólido porque todos los píxeles están cubiertos de color gris.

Ejemplo 1: CSS invierte el color del texto:

En este ejemplo, veremos cómo se cambian los colores del texto de la página web utilizando la función invertir. Antes de avanzar hacia los códigos, nos gustaría mostrar la imagen original de la página web en la que aplicaremos el efecto de la función de color invertida.

Esta página web se forma simplemente utilizando etiquetas HTML y CSS. Encabezados

y

, y

son las etiquetas de cuerpo HTML que son responsables de estos textos que se muestran en la página web. Mientras que el CSS contiene el color de fuente aplicado a ellos porque el color de fuente predeterminado siempre es negro en HTML.

Ahora, considere un código HTML simple que se utiliza para diseñar esta página. Dentro de la parte del cuerpo, un rumbo

se declara. Para aplicar la función invertir en el texto, hemos utilizado CSS interno para el estilo. Como estamos familiarizados con todos los tipos de CSS, el CSS interno se declara mediante el uso de la etiqueta de estilo, dentro de la cabeza del código HTML. Este estilo se realiza usando IDS y clases en la etiqueta de estilo. Se accede a estas clases e ID a través de sus nombres escritos dentro de las etiquetas de contenido de HTML.

Por ejemplo, dentro del encabezado, hemos utilizado una palabra clave de clase con el nombre de la clase que es "invert_effect". Esta clase se declara dentro de la porción de estilo.

1

… .

Se aplica un efecto similar en

y el párrafo.

Después de eso, cierre las etiquetas del cuerpo HTML. La etiqueta de estilo contendrá el estilo para ambos encabezados. Este efecto es el color de la fuente. Ambos encabezados tienen diferentes colores.

1 2 3 4 5

H1 Color morado;

Del mismo modo, el párrafo también tiene el estilo agregando color de fuente. Luego, hemos aplicado un efecto al cuerpo para mostrar todo el contenido de HTML en el centro de la página web. La alineación se da a todo el contenido de la porción del cuerpo HTML.

Después de eso, el efecto principal que es la función de color invertir () se define como una clase.

1 2 3 4

.invert_effect Filtro: invertir (100%);

La clase se declara con una parada completa al principio, que es la identidad de la clase.

Al usar esta función, se cambiarán todos los colores del texto de los encabezados y los párrafos. Todos los colores originales se filtran. Se muestran los colores que quedan atrás. Hemos utilizado el porcentaje de invertir como 100%. O todos los colores se invertirán a fondo.

Cierre la etiqueta de estilo. Luego, guarde el archivo de texto con el .Extensión HTML para abrir el archivo con el bloc de notas en el formato de texto y el navegador en forma de la página web.

Cuando la página web se carga en el navegador, verá que los colores de todo el cuerpo de texto se cambian. Esto se debe a la función invertida que se aplica al texto.

Ejemplo 2: CSS invierte el color de la imagen:

Después de aplicar el efecto de color invertido en el texto, aplicaremos este filtro a la imagen. En el ejemplo anterior, se usaron muy pocos colores en el contenido de texto HTML. Pero ahora hemos usado una imagen con una variedad de colores para aplicar la función de color invertido en esa imagen. Permítanos tener una imagen de muestra JPEG con flores multicolores. JPEG es un formato de imagen que contiene un fondo con ella. La imagen a continuación tiene un fondo blanco.

Esta imagen se usará en el código para aplicar la función invertir en él. Primero, considere la porción del cuerpo HTML. Dentro de la etiqueta del cuerpo, hemos usado el mismo encabezado con una imagen. Se utiliza una imagen en la página web dando la fuente de la imagen. La ubicación también es PC o Internet. Hemos usado el archivo descargado.

1

La etiqueta de imagen contiene el nombre de la clase para aplicar el efecto invertido en ella. Moviéndose hacia la sección CSS, el estilo para el encabezado sigue siendo el mismo. La imagen se diseña al proporcionar las dimensiones proporcionales de la imagen, incluida la altura y el ancho de la imagen. La clase invert_Effect también tendrá el mismo valor filtrado que se aplicará a la imagen.

Guarde el código y ejecute el archivo HTML en el navegador. Verá que todos los colores presentes originalmente en las flores se cambian. El color de fondo también se ve afectado por la función invertir.

De esta manera, el filtro de la función invertir se aplica a todos los colores, ya sea en texto plano o en las imágenes.

Información adicional:

El color gris es responsable de la inversión de los colores. Entonces, para un experimento, hemos disminuido el valor invertido al 38%, para ver cuáles serán los resultados.

1 2 3 4

.invert_effect Filtro: invertir (38%);

La salida tiene la imagen original con una capa poco clara de color grisáceo que ha hecho la imagen entre la condición original e invertida.

Conclusión:

CSS Invert Color es una función que depende de los colores del objeto HTML. Para darle a su objeto una gama única de colores, usamos esta función. Al comienzo del tutorial, explicamos cuál es esta función dando su sintaxis y parámetro. Luego, utilizamos dos ejemplos básicos para elaborar el funcionamiento adecuado de la función invertida en CSS. Esta propiedad está relacionada con el filtro de colores, en el que se cambian todos los colores al proporcionar la cantidad especificada. Hemos aplicado el efecto de filtro tanto en el texto como en la imagen para proporcionar al usuario la forma más fácil de usar la función invertida de CSS.