Suggerimento CSS veloce. Testo sfumatura animato

Creiamo l'effetto di testo con sfumatura animata con proprietà personalizzate basate sugli ambiti e background-clip

Jhey Tompkins

Vai su CodePen e crea un nuovo pen.

Crea il markup per il testo. Utilizziamo un titolo con la parola "Veloce":

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

Aggiungiamo un background-color più scuro al nostro body:

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

Aumenta il font-size nel testo. Utilizza clamp per renderlo adattabile:

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

Crea due proprietà personalizzate per i colori che utilizzeremo. Applica un linear-gradient al background utilizzando questi colori e ruotalo 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 dello sfondo orizzontale. Utilizzalo 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 ritagliare lo sfondo in base 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 uscire e fare esperimenti con il background-position e con il gradiente utilizzato nell'background-image. In alternativa, puoi applicare un'animazione al gradiente nel 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 basate sugli ambiti che semplificano 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;
}

Per approfondire, puoi racchiudere il codice di animazione in una query sui contenuti multimediali per rispettare le preferenze dell'utente per il 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;
    }
  }
}

Fatto! 🎉 Hai creato del testo con sfumatura animata con CSS utilizzando proprietà personalizzate basate sugli ambiti e background-clip.

Ecco questo consiglio in formato video veloce. ⚡️

Preferisci questa presentazione in formato per tweet? 🐦

A presto! ʕ •ᴥ•ʔ

Immagine hero di Vladislav Klapin su Unsplash