Créez cet effet de texte en dégradé animé avec des propriétés personnalisées limitées et un clip d'arrière-plan.
Accédez à CodePen et créez un stylo.
Créez le balisage de votre texte. Utilisons un en-tête avec le mot « Speedy » :
<h1 class="boujee-text">Hello!</h1>
Attribuez ensuite à body
une valeur background-color
plus sombre:
body {
display: grid;
place-items: center;
min-height: 100vh;
background: hsl(0 0% 20%);
}
Augmentez la valeur font-size
de notre texte. Utilisez clamp
pour la rendre responsive:
.boujee-text {
font-size: clamp(3rem, 25vmin, 8rem);
}
Créez deux propriétés personnalisées pour les couleurs que nous allons utiliser. Appliquez un linear-gradient
à la background
en utilisant ces couleurs et faites-la pivoter de 90 degrés:
.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%;
}
Créez une propriété personnalisée que vous pourrez utiliser pour la taille d'arrière-plan horizontal. Utilisez-la pour 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%;
}
Pour découper l'arrière-plan au texte, définissez color
sur transparent
, puis définissez 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;
}
À ce stade, vous pouvez la laisser là et tester la background-position
et le gradient utilisés dans background-image
. Vous pouvez également animer ce dégradé sur l'ensemble de votre texte. Commencez par définir une image clé pour l'animation. La propriété personnalisée --bg-size
que vous avez définie précédemment sera utilisée. Voici un bon exemple de propriétés personnalisées avec champ d'application qui facilitent la maintenance.
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
Appliquez ensuite l'animation à l'aide de 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;
}
Pour aller plus loin, vous pouvez encapsuler le code de votre animation dans une requête média afin de respecter les préférences de mouvement de l'utilisateur:
@media (prefers-reduced-motion: no-preference) {
.boujee-text {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}
Terminé ! 🎉 Vous avez créé du texte en dégradé animé avec CSS à l'aide de propriétés personnalisées limitées et de background-clip
.
Voici une astuce dans sa version rapide ! ⚡️
Vous préférez ce format dans le tweet ? 🐦
Reste bon ! cacdad •ᴥ•Π
Image héros de Vladislav Klapin sur Unsplash