Abbiamo già parlato della proprietà box-shadow, grazie al quale puoi applicare delle ombre agli elementi html come i div, img, button, ecc. Questa proprietà però non ha effetto sui testi, o per meglio dire, potrebbe non avere l’effetto desiderato.
Infatti, applicando box-shadow su un testo, l’ombra non verrà applicata alle lettere ma al contenitore.
Facciamo una prova. Mettiamo il caso in cui volessi applicare un’ombra rossa su un paragrafo.
Il codice HTML sarà:
<p>Sono un paragrafo di esempio</p>Mentre il CSS:
p{
box-shadow: 5px 5px 10px #dd2424;
}Il risultato ottenuto:
Sono un paragrafo di esempio
Come puoi vedere, l’effetto non viene applicato al testo ma al riquadro che lo contiene.
Applicare l’Ombra al Testo
Per risolvere questo problema puoi utilizzare un’altra proprietà CSS che applica l’effetto ombra direttamente al testo.
La proprietà è text-shadow.
Vediamo un esempio.
Attribuiamo la proprietà text-shadow al paragrafo precedente:
p{
text-shadow: 2px 2px 2px #e26a6a;
}Risultato:
sono un paragrafo di esempio
Questa volta volta abbiamo ottenuto l’effetto desiderato. Infatti l’ombra è stata applicata alle lettere del testo e non al contenitore.
I parametri inseriti per la proprietà text-shadow sono:
- offset-x – definisce la distanza orizzontale dell’ombra (sull’asse delle x).
- offset-y – definisce la distanza verticale dell’ombra (sull’asse delle y).
- blur-radius – definisce la sfocatura.
- color – definisce il colore dell’ombra.
I primi 2 sono obbligatori mentre i parametri per la sfocatura e il colore sono facoltativi.
Applicare Ombre Aggiuntive
È possibile applicare più ombre su un singolo testo. Ti basterà separare ogni set di parametri con una virgola.
Esempio:
p{
text-shadow: 2px 2px 2px #e26a6a, 2px 2px 0 #4074b5;
}Risultato:
sono un paragrafo di esempio
Generatori CSS
Come per box-shadow, anche per text-shadow esistono diversi tool online che ti permettono di generare il codice CSS visualizzando l’anteprima della tua ombra in tempo reale.
Eccone alcuni:
Lascia un commento