Uma página da web é feita de dois idiomas básicos do front-end: HTML e CSS. Todos os objetos da página da web criados no corpo HTML são estilizados através do CSS. A cor é uma propriedade básica do CSS que é aplicado a todos os objetos no texto ou na imagem também.

A folha de estilo CSS tem uma função integrada que é usada para inverter as cores no conteúdo do corpo HTML. Este artigo conterá uma explicação sobre a inversão de cores do texto e a imagem também. A sintaxe básica da função invertida é:

Inverter (quantidade aplicada ao objeto)

Este parâmetro único contém a quantidade em porcentagem em que extensão a inversão de cores deve ser feita. O valor desta função para a imagem original é 0%. Considerando que, se o valor da função invertida for 100%, as cores serão invertidas. O valor de 50% mostra que a imagem será uma cor cinza completamente sólida, porque todos os pixels são cobertos com cor cinza.

Exemplo 1: CSS inverte a cor do texto:

Neste exemplo, veremos como as cores do texto da página da web são alteradas usando a função invertida. Antes de avançar em direção aos códigos, gostaríamos de exibir a imagem original da página da web na qual aplicaremos o efeito da função de cor invertida.

Esta página da web é simplesmente formada usando tags HTML e CSS. Títulos

e

, e

são as tags do corpo HTML responsáveis ​​por esses textos exibidos na página da web. Enquanto o CSS contém a cor da fonte aplicada a eles porque a cor da fonte padrão é sempre preta em html.

Agora, considere um código HTML simples que é usado para projetar esta página. Dentro da parte do corpo, um título

é declarado. Para aplicar a função invertida no texto, usamos CSS interno para estilo. Como estamos familiarizados com todos os tipos de CSS, o CSS interno é declarado usando a tag de estilo, dentro da cabeça do código HTML. Este estilo é feito usando IDs e aulas na tag de estilo. Essas classes e IDs são acessadas através de seus nomes escritos dentro das tags de conteúdo de HTML.

Por exemplo, dentro do título, usamos uma palavra -chave de classe com o nome da classe que é "invert_effect". Esta aula é declarada dentro da parte do estilo.

1

.. .

Efeito semelhante é aplicado em

e o parágrafo.

Depois disso, feche as etiquetas do corpo HTML. A tag de estilo conterá o estilo para ambos os títulos. Este efeito é a cor da fonte. Ambos os títulos têm cores diferentes.

1 2 3 4 5

H1 Cor roxa;

Da mesma forma, o parágrafo também é estilizado adicionando a cor da fonte a ele. Em seguida, aplicamos um efeito ao corpo para exibir todo o conteúdo de HTML no centro da página da web. O alinhamento é dado a todo o conteúdo da parte do corpo html.

Depois disso, o principal efeito que é a cor da função invertida () é definida como uma classe.

1 2 3 4

.Invert_effect Filtro: inverter (100%);

A aula é declarada com uma parada completa no início, que é a identidade da classe.

Ao usar esta função, todas as cores do texto de títulos e parágrafos serão alteradas. Todas as cores originais são filtradas. As cores que são deixadas para trás são mostradas. Usamos a porcentagem invertida como 100%. Ou todas as cores serão invertidas completamente.

Feche a etiqueta de estilo. Então, salve o arquivo de texto com o .Extensão HTML para abrir o arquivo com o bloco de notas no formato de texto e o navegador na forma da página da web.

Quando a página da web é carregada no navegador, você verá que as cores de todo o corpo do texto são alteradas. Isso ocorre devido à função invertida que é aplicada ao texto.

Exemplo 2: CSS inverte a cor da imagem:

Depois de aplicar o efeito de cor invertida no texto, aplicaremos este filtro à imagem. No exemplo anterior, havia muito poucas cores usadas no conteúdo de texto HTML. Mas agora usamos uma imagem com uma variedade de cores para aplicar a função de cor invertida nessa imagem. Vamos ter uma imagem JPEG de amostra com flores multicoloridas. JPEG é um formato de imagem que contém um fundo. A imagem abaixo tem um fundo branco.

Esta imagem será usada no código para aplicar a função invertida nela. Primeiro, considere a parte do corpo HTML. Dentro da etiqueta corporal, usamos o mesmo título com uma imagem. Uma imagem é usada na página da web, dando a fonte da imagem. A localização é o PC ou a Internet também. Usamos o arquivo baixado.

1

A tag de imagem contém o nome da classe para aplicar o efeito invertido. Movendo -se em direção à seção CSS, o estilo para o título permanece o mesmo. A imagem é estilizada fornecendo as dimensões proporcionais da imagem, incluindo altura e largura da imagem. A classe Invert_effect também terá o mesmo valor filtrado a ser aplicado à imagem.

Salve o código e execute o arquivo HTML no navegador. Você verá que todas as cores originalmente presentes nas flores são alteradas. A cor do fundo também é afetada pela função invertida.

Dessa forma, o filtro da função invertida é aplicado a todas as cores em texto simples ou nas imagens também.

Informações adicionais:

A cor cinza é responsável pela inversão das cores. Portanto, para um experimento, diminuímos o valor invertido para 38%, para ver quais serão os resultados.

1 2 3 4

.Invert_effect filtro: inverter (38%);

A saída tem a imagem original com uma camada pouco clara de cor acinzentada que fez a imagem entre a condição original e invertida.

Conclusão:

A cor invertida CSS é uma função que depende das cores do objeto HTML. Para dar ao seu objeto uma gama única de cores, usamos esta função. No início do tutorial, explicamos qual é essa função dando sua sintaxe e parâmetro. Em seguida, usamos dois exemplos básicos para elaborar o trabalho adequado da função invertida no CSS. Esta propriedade está relacionada ao filtro de cores, na qual todas as cores são alteradas, fornecendo a quantidade especificada. Aplicamos o efeito do filtro no texto e na imagem também para fornecer ao usuário a maneira mais fácil de usar a função invertida do CSS.