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:
|
1 |
text-shadow: 2px 2px 2px #48577D |
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
|
1 2 |
color: #7690CF; text-shadow: 2px 2px 2px #48577D; |
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
|
1 2 |
color: #707070; text-shadow: 2px 2px 0px #ffffff, 4px 4px 0px #707070; |
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
|
1 2 |
color: #ffffff; text-shadow: 0pt 0pt 5px #ffffff, 0pt 0pt 10px #ffffff, 0pt 0pt 15px #ffffff, 0pt 0pt 20px #ff00de, 0pt 0pt 35px #ff00de, 0pt 0pt 40px #ff00de, 0pt 0pt 50px #ff00de, 0pt 0pt 75px #ff00de; |
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
|
1 2 3 |
color: #222; background:#474747; text-shadow: 0px 2px 3px #666; |
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
|
1 2 3 |
color: #fff; background:#474747; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; |
| Articolo pubblicato 6 anni fa nella categoria 
