Scritta effetto 3D con text-shadow CSS3

Questo è un articolo di risposta ad una richiesta che mi è stata fatta da un visitatore del mio sito: Domenico. In una mail molto gradita, il buon Domenico mi ha fatto i complimenti per il sito, chiedendomi in particolare come avessi fatto a realizzare la scritta Luca Scalvi blog con l'effetto in 3D. Questa richiesta mi è stata fatta nel mese di agosto all'indirizzo email di questo dominio, che io purtroppo guardo raramente! Ho risposto privatamente al buon Domenico, ma non ho ricevuto più risposta. Fedele allo spirito di condivisione ho deciso di rispondere pubblicamente con questo articolo, in modo da raggiungere chiunque altro sia interessato. Non solo...in realtà ho preso la palla al balzo per scrivere questo articolo che (spero) soddisferà la curiosità di Domenico e che servirà a me per ripassare, visto che è parecchio tempo che non scrivo CSS, se non qualche riga.

[Modestia OFF]
Il bellissimo effetto che potete notare passando con il mouse sopra il titolo del blog: Luca Scalvi blog, è ottenuto grazie al CSS3, utilizzando una sua potentissima proprietà: text-shadow. Grazie all'esperienza e alla profonda conoscenza del CSS3, sono riuscito a creare questo effetto 3D, a mio avviso molto ben riuscito.
[Modestia ON]

Il font

Il titolo del mio blog, oltre ad avere l'effetto 3D ha anche un font particolare: Lobster. Questo font è utilizzabile grazie alle API di Google, includendo questa riga nell'header del vostro sito ed aggiungendo la proprietà font-family: 'Lobster'; al tag a cui volete applicare il font.

It's all about CSS

L'ombra, come potete notare, compare solamente quando il mouse passa sopra alla scritta; infatti come vedremo, la proprietà text-shadow è applicata ad una classe :hover

.lstitle:hover {text-decoration: none;
                text-shadow: 0px 1px 1px #ddd,
                             0px 2px 1px #d6d6d6,
                             0px 3px 1px #ccc,
                             0px 4px 1px #c5c5c5,
                             0px 5px 1px #c1c1c1,
                             0px 6px 1px #bbb,
                             0px 7px 1px #777,
                             0px 8px 3px rgba(100, 100, 100, 0.4),
                             0px 9px 5px rgba(100, 100, 100, 0.1),
                             0px 10px 7px rgba(100, 100, 100, 0.15),
                             0px 11px 9px rgba(100, 100, 100, 0.2),
                             0px 12px 11px rgba(100, 100, 100, 0.25),
                             0px 13px 15px rgba(100, 100, 100, 0.3);
                }

La classe è formata da due sole righe: la prima riga definisce che non ci sono decorazioni (underline, overline, line-through, blink) che nel nostro caso rovinerebbero l'effetto voluto. La seconda (molto più complessa) è l'ombra con effetto 3D. text-shadow può avere più definizioni, basta dividerle con una , e chiudere la riga con ;. Analizziamo la prima proprietà in dettaglio: 0px 1px 1px #ddd
E' anch'essa formata da 4 proprietà:

CoordinataX	CoordinataY	Sfocamento	Colore ombra
0px	1px	1px	#ddd

Con valori positivi di CoordinataX e CoordinataY l'ombra verrà visualizzata a destra ed in basso rispetto all'orizzonte della scritta o dell'oggetto a cui è applicata. Sfocamento invece è una proprietà opzionale, non siamo obbligati a specificarla. In generale lo sfocamento ha un valore più alto di 1px, ma nel nostro caso, visto che vogliamo sfruttare la proprietà text-shadow per un effetto 3D (solido) e non per un effetto ombra vero e proprio, dobbiamo limitarci usando valori bassi o nulli (0px).
L'effetto 3D si ottiene applicando 7 proprietà del tutto simili alla prima descritta, nelle quali cambia solo la CoordinataY (incrementata di 1px per volta per creare lo spessore della terza dimensione) ed il colore dell'ombra (da molto chiaro a grigio).
L'ombra vera e propria è applicata con le ultime 6 proprietà, che mantengono la stessa struttura delle precedenti tranne che per il colore dell'ombra: questa volta espresso con la notazione RGBA (Red, Gree, Blue, Alpha) che permette quindi di applicare anche la trasparenza al colore scelto, per rendere ancor più realistica la nostra ombra.
Per questa serie di proprietà, CoordinataX rimane ancora invariato. A variare oltre a CoordinataY (sempre incrementato di 1px) è Sfocamento, che raggiunge il valore di 15px. Il colore che prima variava da chiaro a scuro, rimane lo stesso; quello che varia è la trasparenza (1 = nessuna trasparenza 0 = totale trasparenza). La trasparenza non incrementa linearmente proprio per ottenere un effetto sfocato e non preciso per accentuare l'effetto ombra. Nella tabella, il dettaglio di: 0px 13px 15px rgba(100, 100, 100, 0.3);

CoordinataX	CoordinataY	Sfocamento	Colore ombra
0px	13px	15px	#646464 con 30% di trasparenza

Supporto browser

text-shadow è supportato da tutti browser, ma deve essere aggiunto un suffisso diverso a seconda del browser. Visto che il lavoro del web designer è quello di realizzare codice interpretabile da tutti i browser, è bene aggiungere diverse proprietà, una per ogni tipologia di browser:

text-shadow:0px 0px 10px #333; /* per tutti i browser (supportato da Chrome) */
-text-shadow:0px 0px 10px #333; /* come sopra */
-webkit-text-shadow:0px 0px 10px #333; /* Chrome */
-moz-text-shadow:0px 0px 10px #333; /* Firefox */
-o-text-shadow:0px 0px 10px #333; /* Opera */
-ms-text-shadow:0px 0px 10px #333; /* IE 9+ */
-khtml-text-shadow:0px 0px 10px #333; /* browser basati su Gecko*/

Demo e Donwload

Ho messo a disposizione una demo qui. Vi basterà cliccare sulla scritta per editarla; in questo modo se volete applicare questo stile a qualche scritta potrete verificare in tempo reale se sta bene o meno. Download della pagina di esempio e relativo codice qui.

---