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:

text-shadow: scostamento-x scostamento-y diffusione colore;


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.

text-shadow: 2px 2px 2px #aaa;

Testo con ombra



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.

text-shadow: 0px 1px 1px #000;

Testo 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).

text-shadow: 1px 1px 1px #fff

Testo incassato


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

text-shadow: 0px 0px 5px #000

Effetto eclissi

text-shadow: 0px 0px 5px #8f8

Effetto eclissi


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

text-shadow: 0px 0px 4px white,

             0px -5px 4px #FFFF33,

             2px -10px 6px #FFDD33,

             -2px -15px 11px #FF8800,

             2px -25px 18px #FF2200

Effetto fuoco!



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

Abbonati al feed RSS. Se non sai cos'è guarda qui.

Abbonati alla newsletter per ricevere via email ogni nuovo articolo pubblicato. L'indirizzo verrà gestito da FeedBurner.

Dai il tuo parere, commenta questo articolo!
commenti su Usare la proprietà CSS3 text-shadow
    Lascia un commento

    CC BY-NC-SA 3.0 2004-2020 Daniele Napolitano — Per informazioni sulla licenza leggere le Note legali