Come creare scritte fiammeggianti con i CSS.

Come creare testo fiammeggiante con Cool Text o con i CSS.

Esistono molti siti che offrono degli strumenti veramente carini per creare senza problemi dei testi originali con stili glitterati.  Mi sono poi occupato più diffusamente di CoolText (vai al sito Cool Text) in cui si può scegliere di creare una scritta con decine di stili diversi. La preferenza per questo servizio è dovuta anche al fatto che si possono creare testi animati in formato GIF e che non viene inserito nessun watermark da parte della applicazione.

Il testo fiammeggiante è il primo stile dei quasi 100 disponibili. E' anche possibile lavorare sullo stile tipico per gli antipixel. Vediamo come si possa creare un testo che appaia fiammeggiante utilizzando solo i CSS. Il codice da usare potrebbe essere il seguente

<style type='text/css'>
.testo_fuoco {
color:#FFF; letter-spacing:3px; font-size:48px;
text-shadow: 0 2px 4px #ee7f00,
             0 0 3px #FFF,
             0 -3px 4px #ffff22,
             0 -7px 10px #ffda22,
             0 -12px 12px #ee7f00,
             0 -20px 26px #dd1d00;
}
</style><div class="testo_fuoco">Testo Fiammeggiante</div>

che porta a questo risultato

Dove l'espressione Testo Fiammeggiante può essere sostituita da un'altra. I parametri colorati di viola sono il colore centrale del testo, la distanza tra le varie lettere e la dimensione dei caratteri. Si possono modificare anche i codici dei colori della fiamma adattandoli al nostro gusto personale. E' anche possibile inserire il codice che inizia con <style type='text/css'> e che termina con </style> direttamente nel modello subito sopra la riga </head>. In questo modo quando vorremo inserire nei post un testo fiammeggiante potremo semplicemente incollare in Modalità HTML l'ultima riga oppure una di queste due

<p class="testo_fuoco">Testo Fiammeggiante</p>
<span class="testo_fuoco">Testo Fiammeggiante</span>

che riprendono la classe di stile testo_fuoco dichiarata nel template. Si può anche incollare tutto il codice precedente in un post o in una pagina statica sempre in Modalità HTML. Nell'Editor di Blogger o su Windows Live Writer non se ne vedrà l'anteprima ma il codice funzionerà correttamente con tutti i browser escluso naturalmente con il solito Internet Explorer.