Suggerimento CSS veloce. Testo sfumatura animato

Creiamo un effetto di testo a gradiente animato con proprietà personalizzate basate sull'ambito e clip di sfondo.

Jhey Tompkins

Passa a CodePen e crea una nuova penna.

Crea il markup per il testo. Usiamo un'intestazione con la parola "Veloce":

<h1 class="boujee-text">Hello!</h1>

Quindi, assegniamo al nostro body un background-color più scuro:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

Aggiungi font-size al testo. Utilizza clamp per renderla reattiva:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

Crea due proprietà personalizzate per i colori che useremo. Applica un'istruzione linear-gradient alla background utilizzando questi colori e ruotala di 90 gradi:

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

Crea una proprietà personalizzata che puoi utilizzare per la dimensione orizzontale dello sfondo. Usala per 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%;
}

Per tagliare lo sfondo al testo, imposta color su transparent e imposta 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;
}

A questo punto, puoi lasciarlo lì e sperimentare con background-position e il gradiente utilizzato in background-image. In alternativa, puoi animare la sfumatura sul testo. Innanzitutto, definisci un fotogramma chiave per l'animazione. Verrà utilizzata la proprietà personalizzata --bg-size che hai definito in precedenza. Un buon esempio di proprietà personalizzate con ambito che facilitano la manutenzione.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

Quindi applica l'animazione utilizzando 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;
}

Puoi anche includere il codice di animazione in una query supporti per rispettare le preferenze dell'utente relative al movimento:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

Fine. 🎉 Hai creato del testo animato a gradiente con il CSS utilizzando le proprietà personalizzate basate sull'ambito e background-clip.

Ecco questo suggerimento in un video veloce. ⚡️

Preferisci questa versione in tweet? 🐦

Vivi al meglio! ᴕ •ᴥ• famiglia

Immagine hero di Vladislav Klapin su Unsplash