CSS  »  Guide  »  Guida CSS Tecniche essenziali 

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.

Approfondimenti

• Testo ombreggiato con i CSS3
• Filtri Shadow e Drop Shadow per IE

Altri articoli

Altre guide

Altre newsletter