Come si è visto con i CSS è possibile aggiungere un'ombra ai lati del contenitore inserendo un'apposita stringa, e' possibile aggiungere sempre mediante i CSS un'ombra al testo.
Facciamo l'esempio di aver creato questo stile:
Codice CSS
.shadow
{
font-size: 24px;
}e lo applichiamo alla frase contenuta in un tag span con class.carattere:
Codice HTML
<span class="shadow">Esempio di ombra al testo</span> Aggiungendo la proprietà text-shadow: 4px 4px 8px black; :
Codice CSS
.shadow
{
font-size: 24px;
text-shadow: 4px 4px 8px black;
}e il risultato è questo:
Esempio di ombra al testo
Il primo parametro indica lo spostamento sull’asse x rispetto all’oggetto, il secondo si riferisce allo spostamento sull’asse y; il terzo parametro indica la sfocatura (blur) e l’ultimo parametro il colore.
Anche per questo caso (come per l'ombra ai lati del box) è possibile aggiungere più ombre separate sempre dalla virgola, come in questo caso:
Codice CSS
.shadow
{
font-size: 24px;
text-shadow: 4px 4px 8px black,-2px -2px 4px blue;
}e questo è il risultato che otterremo:
Esempio di ombra al testo
Tale funzione dei CSS per nostra fortuna è compatibile con la maggior parte dei browser di ultima generazione tipo Chrome, Firefox.