Creare ombre ed effetti al testo con la proprietà text-shadow di CCS3

 

Il text-shadow, come il nome indica, è la proprietà CSS che permette di creare ombreggiature al testo. Di seguito mostriamo la sintassi della proprietà text-shadow:

Nella sintassi sopra, il primo valore positivo rappresenta l’asse x (orizzontale) con orientamento alla destra del testo. In caso di valore negativo, l’orientamento sarà alla sinistra del testo.
Analogamente, il secondo valore positivo rappresenta l’asse y (verticale) con orientamento al di sotto del testo.
In caso di valore negativo, l’orientamento sarà al di sopra del testo.
Il terzo valore, che indica la sfocatura, è optional e rappresenta appunto il raggio di sfocatura. Se nessun valore di sfocatura viene specificato, non sarà applicata alcuna sfocatura all’ombra.
Il quarto valore rappresenta il colore dell’ombra.

Decorare il testo con text-shadow

Con la proprietà CSS text-shadow possiamo realizzare alcuni interessanti effetti di testo che in precedenza erano possibile utilizzando magari programmi come photoshop ecc. Di seguito alcuni esempi pratici.

1 – Ombra semplice

Questo è l’esempio base di utilizzo della proprietà text-shadow.
Pixolo.it

 

2 – Effetto testo Vintage / Retro

L’effetto stile vintage del testo è costituito da due ombre. Fare attenzione ad assicurarsi che il colore della prima ombra sia impostato con lo stesso colore dello sfondo della pagina, e che il colore della seconda ombra sia uguale a quello del testo.
Pixolo.it

 

3 – Effetto Neon

L’effetto neon è composto da 8 livelli di ombreggiatura. Al testo base è assegnato un colore bianco, poi in ognuno degli 8 valori di text-shadow sono specificati valori di sfocatura gradualmente sempre più grandi e allo stesso tempo tonalità sempre più scura. Questa miscela genera un grande effetto tra il bianco bagliore interno e la grande aura viola all’esterno.
Pixolo.it

 

4 – Effetto testo incavato

L’effetto del testo stile incavato è uno degli usi più comuni della proprietà text-shadow. Su sfondi scuri orientare l’ombra verso il basso assegnandole un più colore chiaro, mentre su sfondi chiari orientare l’ombra verso l’alto assegnandole un colore più scuro.
Pixolo.it

 

5 – Effetto Fuoco

L’effetto fuoco è un altro stile che utilizza più livelli di ombreggiatura. Ogni ombra è orientata in diverse direzioni, utilizza varie impostazioni di sfocatura e unisce una gamma di colori caldi per creare l’impressione di una fiamma. Questi colori spaziano dai bianchi luminosi fino al giallo, arancio e toni ambra scuro.
Pixolo.it

 

pixolo ads
Animal Comix
5500 | Articolo pubblicato 4 anni fa nella categoria Css - Html, In evidenza.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
2
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×