La proprietà css text-shadow consente di aggiungere un’ombreggiatura ai testi, senza ricorrere al fotoritocco e all’utilizzo di immagini. Combinare questa proprietà con l’uso dello spazio di colore rgba – in sostituzione del classico metodo esadecimale – renderà l’effetto ancora più realistico, poiché sarà possibile utilizzare il valore aggiunto legato all’opacità dell’ombra stessa.
Applicare questa proprietà è molto semplice, per esempio:
h1 { text-shadow: 1px 1px 1px rgba(0,0,0,.4); }
I primi due valori si riferiscono all’offset orizzontale e vericale dell’ombra, il terzo valore indica il livello di sfocatura. Nell’esempio avremo quindi un’ombra a destra e in basso, sfocata di un pixel. Immettendo numeri negativi nei primi due valori, sposteremo l’ombra rispettivamente a sinistra e in alto. Se il terzo valore viene settato a zero, l’ombra sarà netta e marcata, con un forte contrasto.
I primi tre numeri fra parentesi che seguono rgba impostano il colore dell’ombra (metodo rgb: da 0 a 255), mentre l’ultimo serve per inserire l’opacità. L’opacità varia da 0 a 1, quindi con un valore di 0.4 avremo un’opacità dell’ombra al 40%. Il vantaggio del metodo rgba è dato dal fatto che in questo modo l’ombra si integrerà meglio con lo schema di colore del layout in uso.
La tecnica funziona su tutti i browser di ultima generazione: Safari, Firefox, Konqueror, Opera e Chrome. Sfortunatamente Internet Explorer non fa parte di questa categoria.
