Altere dinamicamente a cor para mais leve ou mais escura por porcentagem
Para manter a interatividade e a atratividade do site, os desenvolvedores geralmente querem mudar as cores do elemento depois de algum tempo. Mais especificamente, o CSS permite que os desenvolvedores mudem a cor dinamicamente. Funciona de tal maneira que uma quantidade seja multiplicada entre 0 e 1 para tornar a cor mais escura ou mais leve. Além disso, a escuridão padrão será declarada como “1”, Que não aplica nenhum efeito de cor no elemento selecionado.
Este post demonstrará:
- Como mudar dinamicamente a cor para mais escuro por porcentagem?
- Como mudar dinamicamente a cor para mais leve por percentual?
Como mudar dinamicamente a cor para mais escuro por porcentagem?
No CSS, o valor do “filtro”A propriedade é utilizada para aplicar efeitos. Esta propriedade insere efeitos gráficos de alta resolução, como cor, um pouco de borrão ou borrão completo em um elemento. Mais especificamente, os filtros são comumente usados para ajustar a renderização
Para mudar dinamicamente a cor para mais escura, definindo o valor do “filtro”Propriedade em porcentagem, consulte as instruções abaixo do ritmo abaixo.
Etapa 1: faça um contêiner
Primeiro de tudo, faça o contêiner da div com a ajuda do “”Elemento e também insira um atributo de classe com um nome específico de acordo com sua preferência.
Etapa 2: Crie um botão
Em seguida, utilize o “”Elemento para criar um botão entre a tag de abertura e fechamento da div:
Saída
Etapa 3: Botão de acesso
Agora, utilize o nome da classe com o seletor de classe “.botão”Para acessar o botão.
Etapa 4: aplique propriedades CSS
Em seguida, aplique as propriedades abaixo da listada:
.botão
margem: 70px;
largura: 60%;
Border: 3px Solid #EC9C08;
preenchimento: 10px;
Cor: #FF0000;
Background-Color: RGB (140, 192, 240);
Fonte-peso: 200;
tamanho de fonte: grande;
Negrito;
Aqui:
- ““margem”A propriedade é utilizada para especificar o espaço em branco fora do limite.
- ““largura”Especifica o tamanho do elemento horizontalmente.
- ““fronteira”Define um limite ao redor do elemento.
- ““preenchimento”É usado para alocar o espaço dentro do limite definido.
- ““cor”A propriedade é utilizada para definir a cor do elemento.
- ““cor de fundo”Determina uma cor para a parte traseira do elemento no limite.
- O "espessura da fonte”O valor determina a espessura da fonte.
- ““tamanho da fonte”Especifica o tamanho da fonte como grande.
- ““Fonte”É uma propriedade abreviada utilizada para alocar a fonte.
Saída
Etapa 5: mude a cor para o completo mais escuro
Acesse o botão com a propriedade Pseudo-classe Hover. Isso corresponde quando o usuário vincula um elemento a um mouse. No entanto, não pode iniciá -lo:
.Botão: Hover
filtro: brilho (0%);
No trecho de código acima, o “filtro”A propriedade é utilizada para especificar o efeito no elemento. Aqui, definimos o “brilho (0%)”Para escurecer o elemento.
Com o valor percentual de 0%, a cor do botão ficará escura, que finalmente esconde a legenda:
Para lidar com esta situação, “filtro"Com o valor"(50%)" é aplicado:
.Botão: Hover
filtro: brilho (50%);
O "brilho (50%)”Mostra a cor muda cinquenta por cento do efeito.
Saída
Como mudar dinamicamente a cor para mais leve por percentual?
Para alterar dinamicamente a cor para mais leve por porcentagem, defina o valor do “filtroPropriedade superior a 50%.
Por exemplo, definiremos o brilho do valor para “80%”:
.Botão: Hover
filtro: brilho (80%);
Pode -se observar que, quando o usuário move o cursor sobre o botão, a cor do efeito mais leve se torna mais leve:
No entanto, definindo o “100%”O valor do brilho não afeta a cor:
.Botão: Hover
filtro: brilho (100%);
Saída
Nós ensinamos você sobre a mudança dinamicamente de cor para mais clara ou mais escura por porcentagem.
Conclusão
Para alterar dinamicamente a cor para mais leve ou mais escura por porcentagem, o “filtro”Propriedade é usada. Esta propriedade então chama o “brilho()”Função para aplicar o efeito de brilho. Você pode definir seu valor em porcentagem de 0 a 100, onde o pequeno valor muda a cor para escuro, e o grande número o torna mais leve. Além disso, 100% é o brilho padrão que não adiciona efeito na cor. Este artigo explicou o procedimento de alterar dinamicamente a cor por porcentagem.