TomStardust.com
Web Design, accessibilità, XHTML e CSS
Sei qui: Homepage » browser, css, risorse utili, web design » Text-shadow: effetto ombra sul testo con i CSS
feb 07 2008
Text-shadow: effetto ombra sul testo con i CSS
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 il basso, 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.
Usi Twitter?
8 febbraio 2008 alle 16:59
GallipolinoPeccato che il supporto è solo per Opera e Safari, altrimenti sarebbe interessante utilizzare quest’effetto sul testo.
31 agosto 2008 alle 11:12
SalentoOttima risorsa, ho provato è funziona benissimo, peccato che per il momento non è disponibile per internet explorer e mozilla ;)
4 marzo 2009 alle 20:28
annaHo applicato l’ombra al testo, su safari bellissimo, ma su opera l’ombra è rossa.
Ho sbagliato qualcosa?
Sono passata di qua per caso, trovo questo sito splendido, credo proprio che ci passerò molto spesso
4 marzo 2009 alle 21:01
TomCiao Anna, grazie per i complimenti. La proprietà text-shadow in realtà dovrebbe funzionare correttamente con le versioni di Opera dalla 9.5 in poi, se ti interessa a questo indirizzo c’è una guida approfondita.
5 marzo 2009 alle 11:42
annaGrazie mille, cercherò di capirci qualcosa … l’inglese ed io non siamo molto amici!
La versione di Opera che ho usato è la 9.64 (sistema operativo Mac OS X 10.5.6)e ti assicuro che l’ombra è rossa.
Questo è l’indirizzo della pagina da cui si può vedere: http://www.museosandaniele.it
5 marzo 2009 alle 14:14
Tom@anna: credo che nel tuo caso, visto che dichiari 2 ombreggiature sullo stesso testo, quella rossa risulti più evidente tanto da sembrare unica. Potrei comunque sbagliarmi: magari fai più prove utilizzando un’ombra unica per vedere cosa cambia.
6 marzo 2009 alle 14:27
AnnaHai proprio ragione.
Ero convinta di aver messo una sola ombreggiatura per cui non mi sono assolutamente preoccupata di controllare il codice. Era rossa perché glielo avevo detto io che doveva essere rossa! :oops:
Ora devo scoprire come fare per rendere valido il foglio di stile che risulta non corretto. Se non ci riesco, posso disturbarti di nuovo?
Intanto grazie mille.
25 maggio 2009 alle 14:41
larabello questo effetto!safari è sempre il migliore! :-)
20 giugno 2009 alle 13:16
PacopasSeguo con molto interesse da molti mesi questo blog.
Sono un dilettante, non un vero web-designer.
Ne approfitto per fare i complimenti per la cura e l’attenzione nel proporre ed analizzare nuove soluzioni che si prospettano in questo campo.
C’è un errore di battitura; spostamento a destra spostamento verso il basso (non a sinistra) mi sembrava strano quindi ho verificato.
A quanto pare il primo valore indica lo spostamento verso l’asse orizzontale (da destra) infatti con valori negativi sposta a sinistra
Il secondo parametro considera l’asse verticale (verso il basso)
i valori negativi spostano l’ombra verso l’alto
Poi c’è il raggio di sfocatura, poi il colore.
Ps
Nelle specifichge css3 è già accettato; è possibile sapere quando queste specifiche verranno implementate? Avete qualche rumors a riguardo?
Un affezionato Lurker… per una volta non tanto lurker :D
25 giugno 2009 alle 09:10
Tom@Pacopas: grazie mille per la segnalazione e per aver dato il tuo contributo! Ho appena corretto l’errore :)
12 agosto 2009 alle 05:47
TheJoeho testato text-shadow sull’ultima versione di firefox e funziona, sembra essere stato implementato.
A mio avviso è una funzione molto utile, così la smetterò di duplicare i tag con i css per avere un’ombreggiatura non sfumata. Funziona molto bene.
10 febbraio 2010 alle 17:37
TucanoFilmottimo! appena implementato sul sito, se sapevo che era così facile lo avrei fatto prima!
19 aprile 2010 alle 08:31
otrantoInteressante! lo proverò già da ora su uno dei miei siti
25 ottobre 2010 alle 14:58
TorrevadoBella soluzione, si potrebbe comunque utilizzarlo inserendo un controllo lato server (asp o PHP) per verificare che tipo di browser utilizza l’utente in maniera da farli uscire un immagine o qualcos’altro a chi utilizza browser non supportati.
Comunque Grazie
8 febbraio 2011 alle 18:55
NonSoloSalento.itIn effetti l’idea di TORREVADO non è male. Non sappiamo però se tutti sanno fare questa cosa.
Fateci sapere se in futuro uscirà qualcosa del genere che però sia compatibile con la maggior parte dei browser.
Grazie!