Effetto testo infuocato

Creiamo un semplice effetto su testo dal forte impatto visivo, rendiamolo infuocato! Per fare ciò assegniamo una classe al testo che intendiamo visualizzare con questo effetto, ad esempio .fire.

Ipotizziamo di non aver assegnato alla pagina uno stile di testo particolare, quindi stilizziamo questo testo per filo e per segno.

I punti che andremo a toccare saranno il colore del testo, il carattere, le dimensioni, lo imposteremo in grassetto, lo allineeremo al centro, imposteremo un certo spazio tra le lettere, infine creeremo l'effetto infuocato ed imposteremo la sua larghezza al 100%.

L'attributo di stile cardine dell'effetto è filter ed il suo valore è glow. Esaminiamo la classe:

div.fire {
   color: #FFFFFF;
   font-family: Arial;
   font-size: 20px;
   font-weight: Bold;
   text-align: center;
   letter-spacing: 10px;
   filter: glow(color: #800000, strength: 5);
   width: 100%;
}

Questo è il Tag Html contenente il testo con l'effetto ed il richiamo alla classe:

<div class="fire">Effetto testo infuocato</div>

Questo è il risultato

Effetto testo infuocato

Esaminiamo ora la riga riguardante l'attributo filter, indispensabile per la realizzazione dell'effetto. Passiamo al valore glow due parametri tra parentesi, color, che definisce il colore dell'infuocatura, e strength che ne stabilisce le dimensioni, in questo caso impostate su 5, ma il valore di default è 3.

Una considerazione/consiglio, questo effetto non è supportato da tutti i browser e non tutte le versioni dei browser che lo supportano sono abbastanza aggiornate, quindi, per quanto carino possa essere il colore del testo uguale al colore di sfondo, è il caso di impostarne uno diverso.

Autore: Luca Ruggiero