TomStardust.com

Con i CSS è possibile applicare un’ombra sul testo senza usare nessun programma di fotoritocco. Il testo dell’immagine qui sopra è stato realizzato grazie alla proprietà text-shadow, fino a poco tempo fa presente solo su Safari (fin dalla prima versione!).
Adesso il supporto sarà allargato anche ad Opera con la versione 9.5: vediamo come funziona.

Servono 4 parametri: spostamento verso destra dell’ombra, spostamento verso sinistra, sfocatura e colore.
Ecco un esempio pratico per un titolo con ombra nera:

h2 { text-shadow: 2px 2px 3px #000; }

Interessante anche la possibilità di avere più ombre su un unico testo, basterà separare i valori con una virgola:

h2 { text-shadow: 2px 2px 3px #000, 1px 3px 5px #f00; }

Al momento la proprietà è quindi poco supportata, ma potrebbe essere un’idea utilizzarla sul proprio sito per gli utenti che usano Safari ed Opera. L’importante è fare sempre attenzione che il testo si veda anche sugli altri browser. La maggioranza non vedrà l’ombra, quindi è assolutamente vietato usare testi su background dello stesso colore!

Se volete approfondire, c’è qualche altro esempio pratico di text-shadow su CSS3.info; se invece vi interessa essere sempre aggiornati sull’evoluzione dei CSS, un’ottima risorsa è The Future of Style, aggregatore del W3C che raccoglie tutte le maggiori notizie sull’argomento.

Classificato in browser, css, risorse utili, web design . Puoi fare un trackback dal tuo sito.