La proprietà css3 text-shadow permette di aggiungere una o più ombreggiature ad un contenuto di testo.
NB: le ombreggiature semplice sono, al momento, supportate da Safari, Opera 9.5+ e Firefox 3.1+
Di seguito, vedremo i valori accettati della proprietà text-shadow, come applicarla a un testo e i risultati ottenuti con esempi concreti.
Di base, il text-shadow richiede 2 valori:
- la lunghezza in unità di misura o percentuale dell’ombreggiatura su l’asso orizzontale
- la lunghezza in unità di misura o percentuale dell’ombreggiatura su l’asso verticale
Esempio di base di regole css:
text-shadow:5px 5px;
Preview fatta con Opera 9.6:
Il risultato:
Css3 Text Shadow
Un terzo valore può essere usato per specificare un colore a l’ombreggiatura differente di quella del testo.
Se il colore viene omesso, l’ombreggiatura prenderà di default il colore del testo stesso, come dimostrato nel esempio precedente.
Esempio di base di regole css con colore d’ombreggiatura specificato:
text-shadow:#666666 5px 5px;
Preview fatta con Opera 9.6:
Il risultato:
Css3 Text Shadow
I 2 valori di lunghezza possono essere sia positivi per un ombreggiatura verso la destra e il basso del testo (come nel caso dell’esempio precedente) che negativi per un ombreggiatura verso la sinistra e l’alto del testo (come nel caso dell’esempio seguente).
Esempio di base di regole css con entrambi valori negativi:
text-shadow:#666666 -5px -5px;
Preview fatta con Opera 9.6:
Il risultato:
Css3 Text Shadow
Esempio di base di regole css con un valore negativo e uno positivo (ombreggiatura a sinistra e in basso del testo):
text-shadow:#666666 -7px 10px;
Preview fatta con Opera 9.6:
Il risultato:
Css3 Text Shadow
Per raggiungere un effetto d’ombreggiatura più avanzato, la proprietà css3 text-shadow accetta un ultimo valore per specificare la misura del raggio di ’sfocamento’ (blur).
Esempio di base di regole css con blur di 3px:
text-shadow:#666666 4px 4px 6px;
Preview fatta con Opera 9.6:
Il risultato:
Css3 Text Shadow
Finalmente, più ombreggiature possono essere applicate allo stesso elemento, separando i valori da una virgola.
NB: le ombreggiature multiple sono, al momento, supportate da Opera 9.5+ e Firefox 3.1+
Esempio di base di regole css per ombreggiature multiple:
text-shadow:#666666 4px 4px 8px, #00FDFD -2px -2px 4px;
Preview fatta con Opera 9.6:
Il risultato:
Css3 Text Shadow
Nota personale: anche se la proprietà css3 text-shadow, non è attualmente supportata da tutti i browser, può tranquillamente essere aggiunta per creare un effetto visivo extra per gli utenti che usano un browser che supportata questa proprietà.
Nel caso, di un altro browser come Internet Explorer, il testo apparirà senza ombreggiatura ma del tutto normale e senza difetti che questo proprietà sia applicata o no.
{ 1 trackback }
{ 2 comments… read them below or add one }
Grazie… veramente innovativo…
speriamo che questo vecchio browser quale è Explorer venga al più presto aggiornato.
Mi hai ispirato
Mi è tornato in mente un articolo letto qualche giorno fa
http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css
Mi sono reso conto che è decisamente più semplice con text-shadow