Effetti speciali con text-shadow

La proprietà text-shadow ha fatto la sua prima comparsa nelle specifiche CSS2 ma ha sofferto da subito di una scarsa diffusione a causa del fatto che la maggior parte dei browser non l'hanno mai implementata.

Con la recente febbre da implementazione, che vede i più grandi browser gareggiare tra loro nell'implementare le specifiche CSS3, text-shadow si sta finalmente diffondendo come meriterebbe e alcuni grandi siti web ne stanno facendo un uso sempre più convinto.

Stiamo parlando, ad esempio, del sito della Apple (Figura 1) e di WordPress.org (Figura 2) che la utilizzano per enfatizzare le voci dei menu.

Purtroppo questa proprietà non è ancora ben supportata: solo gli utilizzatori di Safari 3+, Opera 9.5+, Firefox 3.1, Konqueror e iCab potranno godere dei suoi effetti (e non sempre appieno! come spiegheremo in seguito).

Proprio per questa ancora limitata diffusione il suo utilizzo va necessariamente circoscritto in ambiti di puro abbellimento: è quindi prioritario prestare attenzione all'usabilità (evitare ad esempio che un link si distingua da un link al passaggio del mouse solo per il colore dell'ombra).

Nota: per visualizzare correttamente gli esempi avrete bisogno di un browser compatibile!

La proprietà text-shadow

La sinstassi di text-shadow è la seguente:

Ci sono 3 valori che si possono esprimere in pixel, percentuali o em più un campo per definire il colore dell'ombra. Di questi tre valori numerici:

• Il primo indica lo spostamento dell'ombra in orizzontale. Da sinsitra a destra.
• Il secondo indica lo spostamento dell'ombra in verticale. Dall'alto in basso.
• Il terzo indica la sfocatura dell'ombra.

Un'altra caratteristica molto interessante è la possibilità di definrie più ombre per uno stesso elemento. In questo modo:

Basta dividere ogni definizione da una virgola. Attenzione però che l'effeto multi-ombra non è ben supportato da tutti i browser, ad esempio Safari. Se volete testare questo effetto la maniera più facile è utilizzare la beta di Firefox 3.1.

Per avere una panoramica completa della compatibilità, fate riferimento a questa esaustiva tabella (tratta da qui):

Safari 3.1 (Mac/Win)	: si, ma niente ombre multiple
Opera 9.5 (Mac/Win/Lin)	: si
Firefox 2/3 (Mac/Win/Lin)	: no
Firefox 3.1 (Mac/Win/Lin)	: si
IE 6/7/8 (Win)	: no
Google Chrome (Win)	: si, ma niente ombre multiple
Shiira (Mac)	: si, ma niente ombre multiple
Konqueror (Lin/Mac/Win)	: si
iCab (Mac)	: si, ma niente ombre multiple
Epiphany (Lin)	: si
Safari per iPhone	: si, ma niente ombre multiple
Nokia Symbian-Smartphones (Series 60)	: si
Opera Mini 4.1	: si, ma niente sfocatura

Notate come a differenza delle proprietà dei CSS3 non sia necessario utilizzare prefissi proprietari come -moz, -webkit, etc. Questo perché, come anche detto in precedenza, text-shadow fa parte delle specifiche CSS2.

Ora che abbiamo fatto luce sul funzionamento e la sintassi di text-shadow, vediamo qualche esempio pratico.

Link in stile Apple

Sul sito della Apple il menu di navigazione principale fa uso di text-shadow per ricreare un effetto rilievo sui link, che cambia al passaggio del mouse (Figura 3).

Su uno sfondo grigio scuro (che simula il metallo), utilizziamo questo stile di base per i link:

Aggiungiamo text-shadow per i link a riposo, in modo che il testo sembri sopraelevato rispetto allo sfondo. Avremo bisogno di un ombra nitida (0 di sfocatura) e molto leggera (1px verso il basso):

In pratica l'uso che si fa di text-shadow non è tanto quello di ricreare un ombra, quanto quello di replicare gli effetti di luce su un oggetto (solitamente impossibile se non ricorrendo ad un programma di grafica).

Adesso aggungiamo un ombra opposta per i link al passaggio del mouse:

Il risultato finale simula la pressione del testo: da sopraelevato a scavato nello sfondo.
Notate come sia possibile spostare a piacimento l'ombra utilizzando anche valori negativi.

Effetto illuminazione al buio

Un altro effetto che possiamo ottenere è quello di rendere un link luminoso, utilizzando a fondo la variabile sfocatura del text-shadow (Figura 4).

Prendiamo un semplice link su sfondo scuro, con poco contrasto:

Al passaggio del mouse il link si accende, a livello di codice cambiamo il colore in uno molto più chiaro:

Aggiungiamo una sfocatura molto elevata di colore verde, senza spostare l'ombra:

Ecco l'esempio all'opera.

Quando si usa un effetto del genere è importante tenere a mente cosa succede se si utilizza la pagina con un browser che non supporta text-shadow. Ad esempio, se avessimo messo come colore del testo per il passaggio del mouse, lo stesso colore utilizzato per lo sfondo:

Il risultato sarebbe molto più d'impatto, ma, nel caso di non supporto da parte del browser, il link semplicemente scomparirebbe e questa sarebbe una grave pecca nell'usabilità della pagina.

Giocare con le ombre multiple

Le ombre multiple sono uno strumento molto potente nelle mani di un designer. Anche se è meglio dire che lo "sarebbero" in quanto, essendo ancor meno supportate, il loro utilizzo va ridotto al minimo.

Consideriamolo un esercizio di stile, in previsione futura. Come esempio vi porto l'Effetto Fiamma (è un esempio molto comune, Figura 5).

Per ottenerlo basta un semplice:

Godetevi l'esempio (con Firefox 3.1 possibilmente), e pregustatevelo per quando potremo utilizzare liberamente uno strumento del genere.

Conclusioni

Come detto qualche paragrafo prima, utilizzate text-shadow liberamente tenendo sempre a mente l'usabilità delle pagine. Come consiglio vi suggerisco di testare sempre le vostre il tutto su un browser che non supporta text-shadow per vedere come si comporta.

Per altri esempi e approfondimenti, eccovi qualche link:

• Pagina ufficiale di text-shadow sul W3C
• Text Shadow Exposed, articolo di approfondimento con esempi e un po' di storia della proprietà
• Cross-Browser Text-Shadow, come rendere text-shadow compatibile anche con i browser che non la supportano tramite Javascript
• Migliorare l'usabilità dei testi in grassetto con text-shadow

Gli esempi sono disponibili per il download.