Vamos fazer aquele efeito de texto gradiente animado com propriedades personalizadas com escopo e um clipe de plano de fundo
Acesse o CodePen e crie uma nova caneta.
Crie a marcação para seu texto. Vamos usar um cabeçalho com a palavra "Speedy":
<h1 class="boujee-text">Hello!</h1>
Em seguida, vamos atribuir um background-color
mais escuro ao body
:
body {
display: grid;
place-items: center;
min-height: 100vh;
background: hsl(0 0% 20%);
}
Aumente o font-size
no texto. Use clamp
para torná-lo responsivo:
.boujee-text {
font-size: clamp(3rem, 25vmin, 8rem);
}
Crie duas propriedades personalizadas para as cores que vamos usar. Aplique uma linear-gradient
à background
usando essas cores e gire-a em 90 graus:
.boujee-text {
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / 100% 100%;
}
Crie uma propriedade personalizada que você possa usar para o tamanho horizontal do plano de fundo. Use para background-size-x
:
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
}
Para recortar o plano de fundo para o texto, defina color
como transparent
e background-clip: text
:
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
Neste ponto, é possível deixar como está e testar o background-position
e o gradiente usado na background-image
. Também é possível animar esse gradiente no texto. Primeiro, defina um frame-chave para a animação. Isso vai usar a propriedade personalizada --bg-size
que você definiu anteriormente. Um bom exemplo de propriedades personalizadas com escopo que facilitam a manutenção.
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
Em seguida, aplique a animação usando animation
:
.boujee-text {
--bg-size: 400%;
--color-one: hsl(15 90% 55%);
--color-two: hsl(40 95% 55%);
font-size: clamp(3rem, 25vmin, 8rem);
background: linear-gradient(
90deg,
var(--color-one),
var(--color-two),
var(--color-one)
) 0 0 / var(--bg-size) 100%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: move-bg 8s infinite linear;
}
Para levar isso ainda mais, você pode envolver seu código de animação em uma consulta de mídia para respeitar as preferências de movimento do usuário:
@media (prefers-reduced-motion: no-preference) {
.boujee-text {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}
Pronto. 🎉 Você criou um texto gradiente animado com CSS usando propriedades personalizadas com escopo e background-clip
.
Veja esta dica em formato de vídeo rápido! ⚡️
Prefere isso em formulário de tweet? 🐦
Seja incrível! ・ •ᴥ•·
Imagem principal de Vladislav Klapin no Unsplash (em inglês)