Effetto testo infuocato con i Css

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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

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

Effetto testo infuocato

TAGS - css, testo infuocato, effetto testo, filter, glow, strength