aguarde...

19 de março de 2020

4 maneiras de animar a cor de um link de texto ao passar o mouse

Vamos criar um efeito CSS puro que altera a cor de um link de texto ao passar o mouse … mas deslize essa nova cor em vez de simplesmente trocar as cores.

4 maneiras de animar a cor de um link de texto ao passar o mouse

Existem quatro técnicas diferentes que podemos usar para fazer isso. Vamos dar uma olhada nelas, tendo em mente coisas importantes, como acessibilidade, desempenho e suporte ao navegador.

Vamos começar!

#Técnica 1: Usando o clipe de fundo: texto

No momento da redação deste documento, a background-clip: textpropriedade é um recurso experimental e não é suportado no Internet Explorer 11 e abaixo.

Essa técnica envolve a criação de texto nocaute com um gradiente de parada forçada . A marcação consiste em um único elemento HTML link ( <a>) para criar um hiperlink:

<a href="#">Link Hover</a>

Podemos começar a adicionar estilos ao hiperlink. O uso overflow: hiddenrecortará qualquer conteúdo fora do hiperlink durante a transição do foco:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

Precisamos usar um gradiente linear com uma parada forçada de 50% para a cor inicial que queremos que o link seja, assim como a cor para a qual ele mudará:

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Vamos usar background-clippara recortar o gradiente e o textvalor para exibir o texto. Também usaremos as propriedades background-sizebackground-positionpara que a cor inicial apareça:

a {
  /* Same as before */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

Por fim, vamos adicionar a transitionpropriedade :hoverCSS e a pseudo-classe CSS ao hiperlink. Para que o link seja preenchido da esquerda para a direita, passe o mouse sobre a background-positionpropriedade:

a {
  /* Same as before */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

Embora essa técnica atinja o efeito de foco, o Safari e o Chrome cortam decorações e sombras de texto , o que significa que elas não serão exibidas. A aplicação de estilos de texto, como um sublinhado, com a propriedade CSS de decoração de texto não funcionará. Talvez considere usar outras abordagens ao criar sublinhados .

#Técnica 2: Usando largura / altura

Isso funciona usando um atributo de dados que contém o mesmo texto que o da <a>tag e configurando o width(preenchendo o texto da esquerda para a direita ou da direita para a esquerda) ou height(preenchendo o texto de cima para baixo ou para baixo) para cima), de 0% a 100% em foco.

Aqui está a marcação:

<a href="#" data-content="Link Hover">Link Hover</a>

O CSS é semelhante à técnica anterior, menos as propriedades CSS de segundo plano. A text-decorationpropriedade funcionará aqui:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

É quando precisamos usar o conteúdo do data-contentatributo Ele será posicionado acima do conteúdo da <a>tag. Utilizamos o pequeno truque de copiar o texto no atributo data e exibi-lo através da attr()função na propriedade content do ::beforepseudo-elemento do elemento.

a::before {
  position: absolute;
  content: attr(data-content); /* Prints the value of the attribute */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

Para impedir que o texto seja quebrado até a próxima linha, white-space: nowrapserá aplicado. Para alterar a cor de preenchimento do link, defina o valor da propriedade CSS da cor usando o ::beforepseudoelemento e widthiniciando em 0:

a::before {
  /* Same as before */
  width: 0;
  white-space: nowrap;
}

Aumente a largura para 100% no  ::before pseudo elemento para concluir o efeito de texto ao passar o mouse:

a:hover::before {
  width: 100%;
}

Embora essa técnica faça o truque, o uso das propriedades widthou heightnão produzirá uma transição CSS de alto desempenho . É melhor usar as propriedades transformou opacitypara obter uma transição suave de 60 fps.

O uso da text-decorationpropriedade CSS pode permitir que diferentes estilos de sublinhado apareçam na transição CSS. Eu criei uma demonstração mostrando isso usando a próxima técnica: a clip-pathpropriedade CSS.

#Técnica 3: Usando o caminho do clipe

Para esta técnica, usaremos a clip-pathpropriedade CSS com uma forma de polígono. O polígono terá quatro vértices, com dois deles expandindo para a direita ao passar o mouse:

4 maneiras de animar a cor de um link de texto ao passar o mouse

A marcação é igual à técnica anterior. Usaremos um ::beforepseudo-elemento novamente, mas o CSS é diferente:

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
  transition: clip-path 275ms ease;
}

Diferente das técnicas anteriores, text-decoration: underlinedeve ser declarado como ::before pseudo-elementpara a cor preencher o sublinhado ao passar o mouse.

Agora vamos examinar o CSS para a clip-pathtécnica:

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

Os vértices do polígono da clip-pathpropriedade são definidos em porcentagens para definir coordenadas pela ordem escrita:

  • 0 0 = canto superior esquerdo
  • 0 0 = canto superior direito
  • 100% 0 = canto inferior direito
  • 0 100% = canto inferior esquerdo

A direção do efeito de preenchimento pode ser alterada modificando as coordenadas. Agora que temos uma idéia para as coordenadas, podemos fazer o polígono expandir para a direita ao passar o mouse:

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Essa técnica funciona muito bem, mas observe que o suporte à clip-pathpropriedade varia entre os navegadores . Criar uma transição CSS com clip-pathé uma alternativa melhor do que usar a técnica widthheight; no entanto, isso afeta a pintura do navegador .

#Técnica 4: Usando transformação

A marcação para esta técnica usa um método de mascaramento com um <span>elemento. Como usaremos conteúdo duplicado em um elemento separado, usaremos aria-hidden="true"para melhorar a acessibilidade – que o ocultará dos leitores de tela para que o conteúdo não seja lido duas vezes:

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

O CSS para o <span>elemento contém uma transição que será iniciada a partir da esquerda:

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

Em seguida, precisamos  <span>deslizar para a direita da seguinte maneira:

4 maneiras de animar a cor de um link de texto ao passar o mouse

Para fazer isso, usaremos a translateX()função CSS e a definiremos como 0:

a:hover span {
  transform: translateX(0);
}

Em seguida, usaremos o ::beforepseudoelemento para o <span>, novamente usando o data-contentatributo que fizemos anteriormente. Definiremos a posição traduzindo-a 100% ao longo do eixo x.

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

Assim como o <span>elemento, a posição do ::beforepseudo-elemento também será configurada para   translateX(0):

a:hover span::before {
  transform: translateX(0);
}

Embora essa técnica seja a mais compatível com vários navegadores, ela exige mais marcação e CSS para chegar lá. Dito isto, o uso da propriedade CSS de transformação é excelente para o desempenho , pois não aciona repainas e, portanto, produz transições CSS suaves a 60fps.

#Aqui temos!

Acabamos de analisar quatro técnicas diferentes para obter o mesmo efeito. Embora cada um tenha seus prós e contras, você pode ver que é totalmente possível inserir uma mudança de cor no texto. É um pequeno efeito interessante que faz com que os links pareçam um pouco mais interativos.

Posted in Blog
Write a comment