Usare la proprietà CSS3 text-shadow

Con il supporto sempre crescente dei browser alla specifica CSS3 possiamo iniziare a sfruttarne alcune caratteristiche gustose. Una di queste è l'ombra del testo.

La proprietà text-shadow agisce solo sul testo (come del resto suggerisce il nome) e permette di avere il controllo sulle seguenti proprietà dell'ombra:

• Asse X dello scostamento del testo (anche negativo)
• Asse Y dello scostamento dal testo (anche negativo)
• Diffusione dell'ombra
• Colore

La sintassi è la seguente:

Il tutto si traduce in un pratico esempio: un testo nero in grassetto con una ombra in basso a destra di colore grigio. Il testo a sinistra è frutto della proprietà CSS interpretata dal proprio browser mentre il testo a destra è l'immagine di riferimento.

Questa proprietà CSS3 è supportata da tutti i browser aventi il motore Webkit di versione abbastanza recente (quindi Safari 2 e 3 e Chrome), Firefox 3.5, e Opera 9.5. Se usate uno sei suddetti browser dovreste aver notato qualche chicca al template del blog, i link della barra laterale destra, i link della barra di navigazione e i titoli dei post.

Seguono adesso molti esempi della proprietà text-shadow per gli usi più disparati.

Esempi

Questo esempio mostra un testo con effetti in rilievo.

Un altro esempio d'uso è quello di far sembrare il testo incassato semplicemente usando come colore dell'ombra il bianco (o un grigio chiaro).

Questo esempio illustra la creazione di un effetto eclissi sul testo. Da notare il fatto che il testo ha lo stesso colore dello sfondo.

E' anche possibile definire più ombre per avere effetti molto elaborati.

Per saperne di più riguardo le nuove proprietà CSS3 e i browser che le supportano visitate questa pagina.