CSS  »  Articoli  »  CSS 3 

Uno degli effetti più accattivanti definito nella specifica CSS3 è sicuramente quello che consente di creare un testo ombreggiato grazie alla proprietà text-shadow. Prima di scendere nei dettagli, vale la pena raccontare in sintesi la storia tormentata di tale proprietà.

Inizialmente prevista nella specifica CSS2, ma di fatto non supportata da nessun browser sino all'avvento di Safari, è stata eliminata nella specifica CSS2.1, per poi ricomparire, nella definizione che vedremo, nei CSS3. Nonostante le tortuose vie del W3C, comunque, siamo oggi in grado, grazie ad un supporto piuttosto esteso, di poterla sfruttare. Procediamo allora, non prima di aver riportato la consueta tabella con l'indicazione del supporto nei vari browser.

Non supportata	Firefox 3.5 e versioni superiori	Safari 1.0 e versioni successive (*)	Chrome 2.0 e versioni successive	Opera 9.5 e versioni successive

Su Internet Explorer si può ricorrere (con risultati scadenti) ai filtri proprietari Shadow e Drop Shadow. Safari supporta le ombre multiple solo a partire dalla versione 4.0.

La proprietà text-shadow

Se avete seguito gli altri articoli di questa serie dedicata ai CSS3, noterete subito che l'implementazione di text-shadow è pressoché identica a quella di box-shadow, la proprietà con cui è possibile applicare un'ombreggiatura a tutti gli elementi HTML. Iniziamo con il primo esempio.

L'ombreggiatura è stata applicata ad un paragrafo con questa regola:

p {text-shadow: 2px 2px 3px #333;}

Come per box-shadow, la definizione dell'ombra si imposta con quattro valori:

• il primo (2px) definisce lo spostamento dell'ombra sull'asse orizzontale (x);
• il secondo (2px) definisce lo spostamento dell'ombra sull'asse verticale (y);
• il terzo valore (3px) imposta il livello di sfocatura (blur) dell'ombra: più alto è questo valore, più sfocata apparirà l'ombra; se si usa 0 otterremo un'ombra netta e senza sfocatura;
• il quarto valore (#333) definisce il colore dell'ombra.

Altri articoli

Altre guide

Altre newsletter