Top

HIDE

Snippets NO!

FALSE

Pagine

TESTI con effetti

15 novembre 2023 Edit this post

Il web design moderno è una vera e propria cassetta degli attrezzi piena di magie visive, e il CSS è la nostra bacchetta magica!  Uno degl...

Il web design moderno è una vera e propria cassetta degli attrezzi piena di magie visive, e il CSS è la nostra bacchetta magica! 

Uno degli incantesimi più affascinanti è l’effetto "text fill animato", che trasforma il testo in una finestra su un’immagine di sfondo in movimento, senza bisogno di JavaScript. Qual è il trucco? 

Un mix sapiente di background-clip: text;, text-fill-color: transparent; e un’animazione che fa scorrere l’immagine dentro le lettere come un’onda stilosa. 

In questo articolo smonteremo il codice pezzo per pezzo per mostrarti come creare questo effetto wow, tutto con il solo potere del CSS!

Testo 1: stile per sfondo scuro


Spice up your type with CSS Animated text fill — no JavaScript required —


Stilloso vero? Nota bene che ho appositamente usato un esempio nel quale l'animazione del fondo non sia troppo invasiva. Vediamo il codice sotto al cofano.

HTML Testo 1

CSS Testo 1


Vediamo di capire nel dettaglio cosa succede. 

Il codice crea un effetto di testo animato, in cui parte del testo presenta un "riempimento" dinamico derivato da un'immagine di sfondo, senza l'uso di JavaScript. Vediamo in dettaglio come funziona:

1. Stile per l'elemento con classe .lpp

.lpp {
  	text-transform: uppercase;
  	letter-spacing: .5em;
  	display: inline-block;
  	border: 4px double rgba(255,255,255,.25);
  	border-width: 4px 0;
  	padding: 1.5em 0em;
  	position: relative;
  	top: 18%;
  	left: 50%;
  	width: 40em;
  	margin: 0 0 0 -20em;
}

  • text-transform: uppercase;
    Trasforma tutto il testo in maiuscolo.

  • letter-spacing: .5em;
    Aumenta lo spazio tra le lettere, rendendo il testo più "disteso".

  • display: inline-block;
    Permette all'elemento di comportarsi come un blocco in linea, utile per applicare dimensioni e posizionamenti.

  • border: 4px double rgba(255,255,255,.25); e border-width: 4px 0;
    Imposta un bordo doppio (ma solo in verticale, visto che viene applicato solo il bordo superiore e inferiore).

  • padding: 1.5em 0em;
    Aggiunge spazio interno (verticale) per allungare l'area dell'elemento.

  • position: relative; top: 18%; left: 50%; margin: 0 0 0 -20em;
    Questi valori posizionano l'elemento relativamente alla sua posizione naturale. In particolare, il left al 50% combinato con il margin negativo serve a centrare l'elemento orizzontalmente.

  • width: 40em;
    Imposta una larghezza fissa, in unità relative alla dimensione del font, per controllare l'ampiezza del blocco.

2. Stile per il <span> all'interno di .lpp

.lpp span {
    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: .25em 0 .325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255,255,255,.5);

    /* Clip Background Image */
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFiCrdbrr1WYrjnVonVRU5ma6nsTDuFv8Z37rNb7-KQEa3GczO1LEdI1YNMRYZDCt-XfpeikB0AI9VJ2XFYl4kKBKHtgfxoFevJ3m8CyMnBKn8ds414zAdht-ulqhrXH13kS-bi_wcNGiI2b2VN47YtEWxUx_Mlet54rRO813xzJ3QuKmn56FpkSElkPgQ/s1600/animated-text-fill4.png) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;

    /* Animate Background Image */
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;

    /* Activate hardware acceleration for smoother animations */
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
}

  • Font e stile di base:
    Il font viene impostato in grassetto (700) con dimensione 4em, linea di base 1, e viene usato il font "Oswald" (con fallback a sans-serif).
    Lo letter-spacing viene riportato a 0, in modo che solo il blocco esterno abbia l'effetto di distanziamento.

  • Display e allineamento:
    Con display: block; e margin: 0 auto; il <span> viene reso un blocco centrato.

  • Effetto di ombra:
    text-shadow: 0 0 80px rgba(255,255,255,.5); aggiunge un alone luminoso attorno al testo.

  • Clip del background sull'elemento di testo:
    L'immagine di sfondo, specificata con background: url(...) repeat-y;, viene "clippata" al testo grazie a background-clip: text; (e alla sua versione prefissata per WebKit). Questo fa sì che l'immagine venga mostrata solo dove ci sono le lettere.

  • Trasparenza del testo e animazione:
    -webkit-text-fill-color: transparent; rende il riempimento del testo trasparente, facendo emergere l'immagine di sfondo.
    L'animazione, definita da -webkit-animation: aitf 80s linear infinite;, sposta l'immagine di sfondo lungo un percorso animato in 80 secondi, in maniera lineare e infinita.

  • Ottimizzazione grafica:
    Le proprietà -webkit-transform: translate3d(0,0,0); e -webkit-backface-visibility: hidden; attivano l'accelerazione hardware per garantire animazioni più fluide.

3. Definizione dell'animazione

@-webkit-keyframes aitf {
  	0% { background-position: 0% 50%; }
  	100% { background-position: 100% 50%; }
}
  • Questa regola definisce l'animazione aitf per WebKit.
  • 0%: la posizione iniziale dell'immagine di sfondo è all'inizio (0% lungo l'asse orizzontale).
  • 100%: la posizione finale è al 100%, spostando l'immagine lungo l'asse orizzontale.
  • Il risultato è un effetto in cui l'immagine "scorre" all'interno del testo, creando un effetto animato di riempimento.

4. Struttura HTML

<div style="background-color:#777777!important; margin:20px 0px 20px 0px;">
  <br />
  <div>
    <p class="lpp" style="text-align:center;">
      Spice up your type with CSS
      <span> Animated text fill </span>
      — no JavaScript required —
    </p>
  </div>
  <br />
</div>

  • Contenitore esterno:
    Un <div> con uno sfondo grigio e margini verticali di 20px.

  • Paragrafo centrale:
    Il <p> con classe lpp contiene il testo principale e viene centrato tramite text-align: center;.

  • Elemento <span>:
    All'interno del paragrafo, il <span> racchiude il testo "Animated text fill", che è quello a cui viene applicato lo stile animato descritto precedentemente.

  • Il testo complessivo è pensato per mostrare come con il solo CSS sia possibile creare effetti visivi sofisticati (in questo caso, un'animazione che riempie il testo con un'immagine in movimento) senza ricorrere a JavaScript.


Questo esempio è la dimostrazione che con il CSS moderno puoi trasformarti in un vero artista del web! Ecco cosa puoi fare:

🎨 Dare stile al testo come un maestro tipografo (rendilo maiuscolo, gioca con la spaziatura e scegli font super personalizzati).

🌈 Usare il background clipping per effetti visivi che fanno brillare le lettere.

🚀 Creare animazioni fluide e ottimizzate grazie a tecniche avanzate (accelerazione hardware e animazioni WebKit pronte a scattare).

✨ Ottenere un design che cattura l’attenzione, senza scrivere una riga di JavaScript!

Questo codice è una dimostrazione perfetta di quanto il CSS sia potente quando si tratta di effetti visivi avanzati e dinamici. 

Related Posts

Nessun commento

Iscriviti a: Commenti sul post (Atom)
×