Efeito de texto CSS: técnica nº 1
Vamos percorrer a primeira técnica, na qual usamos um pouco de marcação extra para criar o elemento “wipe fill” de cada link.
Especifique a marcação da página
Começaremos com uma lista simples e não ordenada que representará um menu de página típico. Cada link de menu incluirá um nó de texto e um span elemento. O texto dentro do span corresponderá ao texto do item da lista. Daremos a este elemento aria-hidden="true" porque queremos ocultá-lo de qualquer dispositivo de acessibilidade. Na verdade, a única razão de sua existência é nos ajudar a construir o desejado efeito hover.
Como bônus, daremos a nós mesmos a capacidade de definir a direção da animação do efeito de foco. podemos passar o data-animation atributo personalizado aos itens da lista que determinará a posição inicial de sua animação. Os possíveis valores de atributos são to-left, to-bottome to-top. Por padrão, o efeito aparecerá da esquerda para a direita.
Aqui está a marcação necessária:
1 |
|
2 |
|
3 |
|
4 |
About Us |
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
Projects |
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
Clients |
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
Contact |
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
Especifique os estilos básicos
Vamos continuar com os estilos CSS.
Adicionaremos um traço aos links do menu usando o nativo text-stroke propriedade. Hoje em dia, esta propriedade tem um ótimo suporte ao navegador. No entanto, caso precise oferecer suporte ao Internet Explorer ou Microsoft Edge 12-14, você pode usar o text-shadow propriedade para simular um traço.
Se você não gostar do traço ao redor do texto, criei um layout alternativo que acrescentará uma cor de fundo ao menu junto com seus links. Para ativá-lo, basta anexar o has-bg classe para o menu.
Os estilos associados são os seguintes:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.has-bg { |
4 |
background: var(--stroke-color); |
5 |
padding: 40px 0 60px 0; |
6 |
margin-top: 20px; |
7 |
}
|
8 |
|
9 |
.menu a { |
10 |
position: relative; |
11 |
display: inline-block; |
12 |
font-weight: bold; |
13 |
font-size: 60px; |
14 |
line-height: 1.4; |
15 |
overflow: hidden; |
16 |
color: var(--white); |
17 |
-webkit-text-stroke: 1px var(--stroke-color); |
18 |
/*text-shadow: -1px -1px 0 var(--stroke-color), 1px -1px 0 var(--stroke-color), -1px 1px 0 var(--stroke-color), 1px 1px 0 var(--stroke-color);*/
|
19 |
}
|
20 |
|
21 |
.has-bg a { |
22 |
color: var(--secondary-color); |
23 |
text-shadow: none; |
24 |
}
|
E agora para os estilos de animação
O exterior span dentro dos links estarão absolutamente posicionados. Além disso, daremos a ele uma cor de fundo ciano escuro e definiremos sua overflow propriedade para hidden. Por padrão, vamos movê-lo 100% de sua posição original para a esquerda e seu interior span 100% de sua posição original para a direita. Então, cada vez que passarmos o mouse sobre um link, removeremos sua inicial transform valores. Esse truque simples produzirá um efeito de foco de texto de preenchimento que irá da esquerda para a direita.
Aqui estão os estilos associados:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.menu .outer { |
4 |
position: absolute; |
5 |
top: 0; |
6 |
left: 0; |
7 |
overflow: hidden; |
8 |
color: var(--fill-color); |
9 |
transform: translateX(-100%); |
10 |
}
|
11 |
|
12 |
.menu .inner { |
13 |
display: inline-block; |
14 |
transform: translateX(100%); |
15 |
}
|
16 |
|
17 |
.menu a .outer, |
18 |
.menu a .inner { |
19 |
transition: transform 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02); |
20 |
}
|
21 |
|
22 |
.menu a:hover .outer, |
23 |
.menu a:hover .inner { |
24 |
transform: none; |
25 |
}
|
Especificando direção
Por fim, conforme discutido na seção de marcação, podemos personalizar a direção do nosso efeito de foco passando o data-animation atributo a um item de menu. Dependendo da direção do efeito (horizontal ou vertical), temos que definir valores de transformação reversa para o .outer e .inner elementos:
1 |
[data-animation="to-left"] .outer { |
2 |
transform: translateX(100%); |
3 |
}
|
4 |
|
5 |
[data-animation="to-left"] .inner { |
6 |
transform: translateX(-100%); |
7 |
}
|
8 |
|
9 |
[data-animation="to-top"] .outer { |
10 |
transform: translateY(100%); |
11 |
}
|
12 |
|
13 |
[data-animation="to-top"] .inner { |
14 |
transform: translateY(-100%); |
15 |
}
|
16 |
|
17 |
[data-animation="to-bottom"] .outer { |
18 |
transform: translateY(-100%); |
19 |
}
|
20 |
|
21 |
[data-animation="to-bottom"] .inner { |
22 |
transform: translateY(100%); |
23 |
}
|
A demonstração resultante:
Efeito de texto CSS: técnica nº 2
Vamos agora examinar a segunda técnica, na qual mantemos nossa marcação mais limpa usando pseudo-elementos para fornecer o “wipe fill”.
Especifique a marcação da página
Começaremos novamente com uma lista simples e não ordenada. Cada link de menu incluirá o data-text atributo personalizado. O valor desse atributo corresponderá ao texto do link relacionado.
Da mesma forma que no exemplo anterior, podemos personalizar a posição inicial de uma animação através do data-animation atributo. Os possíveis valores de atributos são to-left, to-bottome to-top. Por padrão, o efeito aparecerá da esquerda para a direita.
Aqui está a marcação necessária para começarmos:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
Especifique os estilos de animação
Os estilos CSS básicos para isso são os mesmos da técnica anterior. Para a animação, vamos definir o ::before pseudo-elemento de cada link do menu e posicioná-lo absolutamente. Seu conteúdo virá do data-text valor do atributo do link pai. Inicialmente, sua largura será 0, mas quando passarmos o mouse sobre o link de destino, ele será definido como 100%. Além disso, vamos dar-lhe white-space: nowrap portanto, o texto nunca passará para uma nova linha.
Os estilos relacionados para isso são os seguintes:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.menu a::before { |
4 |
content: attr(data-text); |
5 |
position: absolute; |
6 |
top: 0; |
7 |
left: 0; |
8 |
width: 0; |
9 |
overflow: hidden; |
10 |
color: var(--fill-color); |
11 |
white-space: nowrap; |
12 |
transition: all 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02); |
13 |
}
|
14 |
|
15 |
.menu a:hover::before { |
16 |
width: 100%; |
17 |
}
|
Adicione os estilos de efeito de foco
Em seguida, adicionaremos os estilos responsáveis por personalizar a direção do nosso efeito de foco. Então, primeiro, temos que verificar a direção da animação desejada (horizontal ou vertical), depois animar de acordo com o width ou o height propriedade do pseudo-elemento de destino. Além disso, caso estejamos interessados na animação “para a esquerda” ou “para cima”, devemos trocar os valores de cor do texto do pseudoelemento de destino e seu link pai.
Os estilos que lidam com essas animações são os seguintes:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.menu [data-animation="to-left"] a, |
4 |
.menu [data-animation="to-top"] a { |
5 |
color: var(--fill-color); |
6 |
}
|
7 |
|
8 |
.menu [data-animation="to-left"] a::before, |
9 |
.menu [data-animation="to-top"] a::before { |
10 |
color: var(--white); |
11 |
}
|
12 |
|
13 |
.menu [data-animation] a::before { |
14 |
width: 100%; |
15 |
}
|
16 |
|
17 |
.menu [data-animation="to-left"] a:hover::before { |
18 |
width: 0; |
19 |
}
|
20 |
|
21 |
.menu [data-animation="to-top"] a::before { |
22 |
height: 100%; |
23 |
}
|
24 |
|
25 |
.menu [data-animation="to-top"] a:hover::before { |
26 |
height: 0; |
27 |
}
|
28 |
|
29 |
.menu [data-animation="to-bottom"] a::before { |
30 |
height: 0; |
31 |
}
|
32 |
|
33 |
.menu [data-animation="to-bottom"] a:hover::before { |
34 |
height: 100%; |
35 |
}
|
A demonstração resultante:
Efeito de Texto CSS: Técnica #3
Esta terceira técnica de efeito hover do CSS (que é a mais limpa e rápida) aproveita o clip-path propriedade.
Especifique a marcação da página
A marcação será exatamente igual à marcação da segunda técnica; haverá uma lista com links com os data-text atributo associado a cada um. Mais uma vez, a existência do data-animation O atributo a um item de menu pode personalizar a direção da animação, que será da esquerda para a direita por padrão.
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
Especifique os estilos de animação
Os estilos serão parecidos com o exemplo anterior. Continuaremos tendo um posicionamento absolutamente ::before pseudo-elemento que será invisível por padrão. Desta vez, porém, não vamos dar width: 0 ou height: 0mas, em vez disso, vamos torná-lo invisível por meio do clip-path propriedade. Em seguida, ao passar o mouse, animaremos essa propriedade e mostraremos o pseudoelemento.
Se você quiser saber mais detalhes sobre o clip-path propriedade e como usá-la para obter efeitos de rolagem atraentes, dê uma olhada nos tutoriais abaixo.
Aqui estão os principais estilos para este método funcionar:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.menu a::before { |
4 |
content: attr(data-text); |
5 |
position: absolute; |
6 |
top: 0; |
7 |
left: 0; |
8 |
width: 100%; |
9 |
height: 100%; |
10 |
color: var(--fill-color); |
11 |
clip-path: inset(0 100% 0 0); |
12 |
transition: clip-path 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02); |
13 |
}
|
14 |
|
15 |
.menu [data-animation] a:hover::before, |
16 |
.menu a:hover::before { |
17 |
clip-path: inset(0); |
18 |
}
|
19 |
|
20 |
/* ANIMATIONS
|
21 |
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
22 |
.menu [data-animation="to-left"] a::before { |
23 |
clip-path: inset(0 0 0 100%); |
24 |
}
|
25 |
|
26 |
.menu [data-animation="to-top"] a::before { |
27 |
clip-path: inset(100% 0 0 0); |
28 |
}
|
29 |
|
30 |
.menu [data-animation="to-bottom"] a::before { |
31 |
clip-path: inset(0 0 100% 0); |
32 |
}
|
A demonstração associada:
Conclusão
E terminamos! Neste exercício, discutimos três maneiras diferentes de criar um efeito de passagem de preenchimento de limpeza somente com CSS. Felizmente, isso o inspirou a construir algo semelhante ou, pelo menos, incorporar o efeito em um projeto existente.
Como sempre, obrigado pela leitura!
Aprenda CSS com esses projetos
Poucas coisas são tão divertidas no mundo da codificação front-end quanto mexer com CSS; dê uma olhada nesses projetos CSS no Tuts+ e aprenda jogando!
