Tra i tanti nuovi effetti disponibili con la nuova specifica del CSS3, uno tra i più utili è sicuramente la possibilità di aggiungere un’ombreggiatura al testo.
L’effetto è realizzabile grazie alla proprietà text-shadow a cui è garantito, contrariamente a come si possa pensare, un buon supporto dalla maggior parte dei browser.
La proprietà text-shadow prende in ingresso quattro parametri, come possiamo vedere dal seguente codice:
h1 {
text-shadow: 2px 2px 4px black;
}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.
Vediamo la porzione di codice appena vista in azione nel seguente esempio.
È possibile sfruttare la proprietà anche per inserire ombre multiple allo stesso oggetto. Per realizzare ciò è sufficiente inserire i diversi valori di ombreggiatura nella stessa regola separati da una virgola “,”.
h1 {
text-shadow: 2px 2px 4px #777,
-2px -2px 4px #777;
}L’esempio è disponibile su questa pagina.
Supporto dei browser
Come detto in precedenza, il supporto a questa proprietà è esteso a tutti i browser (eccetto ovviamente IE in tutte le sue versioni). L’unica nota riguarda Safari che supporta ombre multiple a partire dalla versione 4.
Internet Explorer garantisce il supporto all’ombra attraverso i propri filtri. I risultati, però, non sono certamente entusiasmanti. La regola iniziale, estesa anche ad Internet Explorer diventa:
h1 {
text-shadow: 2px 2px 4px black;
filter:DropShadow(Color=#000000, OffX=2, OffY=2);
}Possiamo testare la demo con Internet Explorer nella seguente pagina.