Tra le numerose proprietà introdotte con la nuova versione 3 dei Cascading Style Sheet, abbiamo già menzionato in un precedente articolo quella che permette di aggiungere un’ombreggiatura ad un contenitore (box-shadow – leggi qui).

Analogamente, la proprietà text-shadow genera un effetto di ombreggiatura applicato ad un testo.

Vediamo la sintassi della relativa dichiarazione:

h1 {
…
text-shadow: #333 5px 6px 3px;
…
}

dove #333 è il colore del testo (qui espresso in codice esadecimale), 5px è l’offset orizzontale, 6px è l’offset verticale e 3px è l’estensione (sfocatura o blur).

Con il termine offset si intende lo spostamento dell’ombra rispetto al testo sull’asse X (orizzontale) e sull’asse Y (verticale).

La dichiarazione di cui sopra è stata applicata all’Esempio 1 riportato in questa pagina.

Possiamo utilizzare la notazione rgba per indicare il colore introducendo il canale alfa, cioè la trasparenza.

Le due dichiarazioni che seguono sono equivalenti:

text-shadow: #333 5px 6px 3px;
text-shadow: rgba(51,51,51,1) 5px 6px 3px;

essendo alfa = 1 il colore privo di trasparenza; a questo punto possiamo ridurre il valore, ad esempio:

text-shadow: rgba(51,51,51,0.3) 5px 6px 3px;

che è quello dell’Esempio 2 nella pagina linkata sopra.

E’ anche possibile applicare più ombre contemporaneamente allo astesso elemento di testo.
Sarà sufficiente inserire i relativi valori nella stessa dichiarazione, uno di seguito all’altro, separati da una virgola, come segue:

text-shadow: #333 5px 6px 3px, #FF0 5px -6px 3px;

che è quello dell’Esempio 3 nella pagina linkata sopra.

Occorre prestare attenzione a non abusare di questa proprietà poiché, se è vero che applicata correttamente può generare un effetto gradevole e fare risaltare i titoli, è altresì vero che il suo abuso può compromettere la leggibilità dei testi.
Guardate l’Esempio 4 nella pagina linkata sopra per visualizzare un caso di … pessimo utilizzo della proprietà!