CSS HTML

Aplicar CSS para só metade do caractere ou texto

17 de maio de 2020

Aplicar CSS para só metade do caractere ou texto

Neste artigo veremos uma forma de aplicar CSS para só metade do caractere e é claro de uma forma muito simples, sem utilizar quaisquer biblioteca externa.

aplicar css a só metade do caractere CSS capa

Fala programador(a), tudo bem? Bora aprender mais sobre CSS!

A ideia para deixar apenas metade de um caractere com CSS é de utilizarmos um gradient, que metade será de uma cor e a outra metade de outra

Assim deixando cada parte da letra ou caracte com cores distintas

Além disso iremos remover a transição do gradient ou degrade, para que as cores sejam alteradas subtamente, criando o efeito de que cada metade tenha sua própria cor

Vamos então a um exemplo prático:

<h1>H</h1>

E agora veja o CSS necessário:

h1 {
  display: inline-block;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 200px;
  background: linear-gradient(to right, red 50%,blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

E o resultado final será:

exemplo gradient em um caractere

Conforme o texto for ficando maior, será necessário ajustar os parâmetros de background

As propriedades de background-clip e text-fill-color são de suma importânci para o recurso funcionar

A background-clip entende que a cor de fundo é no texto e não no fundo do elemento

E text-fill serve para aplicar cor ao texto

Conclusão

Neste artigo vimos como aplicar CSS para só metade do caractere

Utilizamos a propriedade de background com um gradient, que aliada as propriedades de background-clip e text-fill vão permitir este recurso

Lembrando que conforme os textos vão ficando maiores, vamos precisamos ajustar alguns valores da propriedade background para poder adaptar onde cada parte começa e acaba

Desta forma ajustamos para ficar exatamente no centro do texto

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x