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.
Peccato che il supporto è solo per Opera e Safari, altrimenti sarebbe interessante utilizzare quest’effetto sul testo.
Ottima risorsa, ho provato è funziona benissimo, peccato che per il momento non è disponibile per internet explorer e mozilla ;)
Ho 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
Ciao 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.
Grazie 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
@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.
Hai 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.
bello questo effetto!safari è sempre il migliore! :-)
Seguo 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
@Pacopas: grazie mille per la segnalazione e per aver dato il tuo contributo! Ho appena corretto l’errore :)
ho 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.
ottimo! appena implementato sul sito, se sapevo che era così facile lo avrei fatto prima!
Interessante! lo proverò già da ora su uno dei miei siti
Bella 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
In 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!
Ma questo codice è lo stesso per il CSS3?
Questa è la base poi da qui possiamo creare quello che vogliamo :)