Continua la rubrica Proprietà CSS3, nel quale ogni mese pubblicherò una nuova funzione CSS3 per abbellire e alleggerire il vostro sito.

La proprietà CSS3 che andremo a considerare oggi è: text-shadow che permette di aggiungere una o più ombreggiature ad un testo.

Vediamo subito come si presenta:

Testo Ombreggiato

La sintassi:

text-shadow: margine-x margine-y diffusione colore;

Text-Shadow di base

Di base, il text-shadow richiede 2 valori: la lunghezza in unità di misura o percentuale dell’ombreggiatura su l’asse orizzontale e sull’asse verticale.

Esempio di base di regole css:

Text-Shadow di base

text-shadow: 3px 3px;

C’è da dire che questa proprietà non è compatibile con tutti i browser.

Text-shadow con ombreggiatura colorata

Come si può notare dall’esempio precedente, se il colore viene omesso, l’ombreggiatura assegnerà di default il colore del testo stesso.

Per specificare il colore dell’ombreggiatura è necessario un terzo valore, ovvero il codice relativo al colore, come possiamo notare da questo esempio:

Text-Shadow con ombra colorata

text-shadow: 3px 3px #000;

Nella definizione del text-shadow, i valori in pixel dell’asse orizzontale e verticale possono avere anche un valore negativo:

Text-Shadow con ombra colorata

text-shadow: -3px -3px #000;

Text-shadow con ombreggiatura sfocata

Negli esempi precedenti l’ombra è la ripetizione fedele del testo che si trova in primo piano. Per sfocare i bordi dell’ombra aggiungiamo un quarto valore subito prima della definizione del colore, ecco un’esempio:

Text-Shadow con ombra sfocata

text-shadow: 3px 3px 5px #000;

Nella definizione del text-shadow, i valori in pixel dell’asse orizzontale e verticale possono avere anche un valore nullo:

Text-Shadow con ombra sfocata

text-shadow: 0 0 5px #000;

Text-shadow con ombreggiatura multipla

Ultimamente, alcuni browser supportano l’ombreggiatura multipla, che consiste nell’applicare a un singolo elemento più ombreggiature separate tra di loro con una virgola, vediamo il risultato:

Text-Shadow con ombra multipla

text-shadow: -4px -4px #FFCC00, 4px 4px 8px #000;

Altri esempi di text-shadow

Testo Incavato

background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;

Testo in Rilievo

background:#404040;
color:#505050;
text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;

Effetto fiamma

background:#666666;
color:#333333;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Effetto Neon

background:#404040;
color:#CC065E;
text-shadow: 0px 0px 10px #CC065E, -1px -1px #000;