Get best of the week

CSS puro: 4 métodos para animar cores de links

O autor do artigo, cuja tradução publicamos hoje, propõe, usando CSS puro, criar um mecanismo para alterar a cor do texto do link quando você passa o mouse sobre ele. Mas isso não deve ser uma mudança de cor comum. A nova cor deve preencher o link da esquerda para a direita, substituindo a antiga.


Para fazer isso, você pode recorrer a um dos quatro métodos descritos neste material. Considere esses métodos, prestando atenção especial a várias coisas importantes, como acessibilidade ao conteúdo, desempenho da solução e suporte ao navegador.

Método # 1: usando background-clip: text


No momento da redação deste artigo, a propriedade background-clip: text é experimental. Não é suportado no Internet Explorer 11. Este método envolve a criação do chamado " texto eliminado " (texto que parece cortado em uma determinada superfície e o fundo é translúcido) com um gradiente acentuado . A marcação HTML consiste em um único elemento <a>que descreve um hiperlink.

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

Vamos começar criando estilos para o link. O uso overflow: hiddenlevará ao fato de que, quando você altera a aparência do link, tudo o que está além do escopo desse elemento é cortado.

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

Precisamos usar um gradiente linear nítido com um valor de 50% para as cores inicial e final do link.

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

Use a propriedade background-clippara aparar o gradiente. Vamos dar um valor textpara a exibição de texto. Usaremos as propriedades de background-sizee background-position. Isso é feito para exibir a cor inicial.

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

E, finalmente, adicione uma propriedade CSS ao estilo e estilo da transitionpseudo classe de hiperlink :hover. Para que a nova cor para preencher o link da esquerda para a direita quando você passa o mouse sobre o link, use a propriedade background-position.

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

Aqui está um exemplo no CodePen. Embora essa técnica permita alcançar o efeito desejado, o Safari e o Chrome apararam os elementos de texto e sombra. Isso significa que eles não serão mostrados. A aplicação de estilos de texto, como sublinhar o texto usando a propriedade CSS text-decoration, não funcionará. Portanto, se você deseja que os links sejam sublinhados, considere outras maneiras de personalizar o sublinhado .


Método # 2: aplicando largura / altura


Este método é baseado no uso do atributo data- * que contém o mesmo texto que a tag <a>. Aqui você usa o gerenciamento de propriedades width(para preencher o link com cores da esquerda para a direita ou da direita para a esquerda) ou propriedades height(para aplicar o efeito de cima para baixo ou de baixo para cima). Por exemplo, no nosso caso, um efeito é aplicado a uma propriedade widthque, quando você passa o mouse sobre um link, muda de 0 a 100%. Aqui está a marcação:

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

O CSS é semelhante ao usado no exemplo anterior, exceto pelas configurações da propriedade em segundo plano. Aqui, além disso, a propriedade funcionará bem text-decoration:

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

Isto é onde nós precisamos usar o texto do atributo data-content. Este texto será colocado em cima do conteúdo da tag <a>. Podemos usar um pequeno truque interessante aqui, que consiste em copiar texto de um atributo e derivá-lo usando uma função attr()na propriedade de um contentpseudo-elemento de um link ::before.

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

Para que o texto não pule para uma nova linha, um estilo será aplicado ao pseudoelemento white-space: nowrap. Para alterar a cor do link, defina o valor da propriedade CSS do colorpseudo - elemento ::beforee faça com que, no início, o valor da propriedade seja width0:

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

Aumente o valor do widthpseudoelemento ::beforepara 100% para aplicar o efeito ao passar o mouse sobre o link do mouse:

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

Aqui está um exemplo da aplicação desse método: Embora, agindo nas propriedades do elemento widthe heightatingindo o que precisamos, esse método é notável por baixa produtividade . Para obter uma mudança suave de cor a 60 quadros por segundo - é melhor usar as propriedades transformou opacityUsar esta propriedade text-decorationpermite usar vários estilos de ênfase de texto em links animados. Aqui está um exemplo que demonstra isso, criado usando a terceira técnica, que consideraremos agora. É baseado no uso da propriedade CSS do clip-path .



Método 3: usando o caminho do clipe


Aqui vamos usar a propriedade CSS clip-pathe o polígono, neste caso, o retângulo. O retângulo tem quatro cantos, o comprimento de dois lados aumenta quando você passa o mouse sobre o link. A figura se expande, um de seus lados se move da esquerda para a direita.


Ele usa a mesma marcação do exemplo anterior:

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

Nós, novamente, usaremos o pseudoelemento ::before. Mas o CSS é diferente aqui:

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;
}

Diferentemente do método anterior, aqui a propriedade text-decoration: underlinedeve ser configurada para o pseudo-elemento ::before. Isso é necessário para que a mudança de cor afete não apenas o texto do link, mas também a linha que sublinha o link.Vejamos agora o código CSS da propriedade clip-path:

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

As posições dos vértices do polígono na propriedade são clip-pathdefinidas em porcentagem, elas determinam as coordenadas na ordem correspondente à sua colocação no polígono:

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

A direção de aplicação do efeito de preenchimento pode ser alterada modificando as coordenadas. Agora que conhecemos as coordenadas, podemos fazer a figura crescer movendo-se da esquerda para a direita quando você passa o mouse sobre o link do mouse:

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

Aqui está uma versão funcional deste exemplo: essa técnica de animação de cores de link funciona muito bem, mas antes de usá-la, considere o suporte da propriedade em clip-pathdiferentes navegadores. Criar transições CSS usando clip-pathé melhor do que usar a técnica height / width. No entanto, seu uso leva ao fato de o navegador executar operações de pintura com muitos recursos (desenho).

Método # 4: usando transformação


A marcação usada aqui usa a técnica de mascaramento de elementos <span>. Como usaremos o <span>conteúdo que duplica o conteúdo do link no elemento , usaremos o atributo para melhorar a disponibilidade do conteúdo aria-hidden="true". Isso ocultará a repetição de texto dos leitores de tela.

Esse texto não será dublado duas vezes:

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

O CSS para o elemento <span>contém uma descrição da transição, que começa à esquerda:

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

Agora você precisa organizar o movimento do elemento <span>para a direita, conforme mostrado abaixo.


Para fazer isso, use o ::beforeelemento pseudoelemento <span>. E, como antes, vamos recorrer ao uso do atributo data-content. Vamos mudar a posição do elemento, aplicando uma transformação transform: translateX(100%), movendo-o 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;
}

Como no elemento <span>, a posição do pseudoelemento ::beforeserá definida usando a construção transform: translateX(0):

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

Aqui está um exemplo no CodePen: embora esse método tenha o melhor suporte para vários navegadores acima, ele precisa de mais HTML e CSS para implementá-lo. No entanto, o uso de propriedades CSS transform não prejudica o desempenho , seu uso não causa redesenho de elementos e, como resultado, leva à formação de transições suaves de CSS a 60 quadros por segundo.


Sumário


Acabamos de analisar quatro métodos diferentes para obter o mesmo efeito usando CSS. Embora cada um deles tenha seus prós e contras, você pode ver que não há nada impossível em organizar a animação da cor do texto dos links quando você passa o mouse sobre eles. Esse é um pequeno efeito agradável, cuja utilização leva ao fato de que os links são percebidos como mais interativos.

Queridos leitores! Você anima links em seus projetos?

More articles:


All Articles