Proprietà text-shadow

La proprietà text-shadow imposta l'ombra per il testo. Come valore, la proprietà accetta 4 parametri, elencati separati da spazi, oppure la parola chiave none, che disabilita completamente l'ombra (questo è il valore predefinito).

Sintassi

selettore {
	text-shadow: spostamento_x spostamento_y sfocatura colore;
}

selettore {
	text-shadow: none;
}

Parametri

Parametro	Descrizione
spostamento per x	Imposta lo spostamento dell'ombra lungo l'asse X. Un valore positivo sposta a destra, uno negativo a sinistra.
spostamento per y	Imposta lo spostamento dell'ombra lungo l'asse Y. Un valore positivo sposta verso il basso, uno negativo verso l'alto.
sfocatura	Imposta la sfocatura dell'ombra. Più grande è il valore, più sfocata sarà l'ombra. Parametro opzionale. Se non specificato, l'ombra sarà nitida.
colore	Imposta il colore dell'ombra in qualsiasi unità di misura per il colore. Parametro opzionale. Se non specificato, il colore dell'ombra corrisponde al colore del testo.

Gli spostamenti lungo gli assi e la sfocatura sono specificati in qualsiasi unità di misura per le dimensioni, eccetto le percentuali.

Esempio

Spostiamo l'ombra in basso e a sinistra e aggiungiamo una leggera sfocatura:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Esempio . Ombra nitida

Ora rendiamo l'ombra di colore rosso, spostiamola in basso e a sinistra, ma rimuoviamo la sfocatura - l'ombra sarà nitida:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Esempio . Ombra uniforme

Ora l'ombra non è spostata, ma le è stata aggiunta una sfocatura:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Vedi anche

la proprietà box-shadow,
che imposta l'ombra per un contenitore