Effetto testo infuocato con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.854)

:: Referenze dei fogli di stile Css (41.897)

:: Menu ad effetto mouseover con i Css (39.283)

:: Effetti sui link con i Css (30.271)

:: Testo verticale coi Css (20.094)

:: Angoli smussati in un box coi Css (18.970)

:: Box con effetto ombra con i CSS3 (16.383)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.287)

:: Stilizzare i form Html con i Css (16.100)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.887)

IN EVIDENZA
DOWNLOAD