Ombreggiature testo

Internet Explorer 10 e le app di Windows Store scritte in JavaScript supportano le ombreggiature sul testo con la proprietà CSS3 (Cascading Style Sheets, Level 3)  text-shadow.

Proprietà text-shadow

La proprietà text-shadow applica un effetto di ombreggiatura al testo specificato ed è definita nella specifica W3C (World Wide Web Consortium) CSS Text Decoration Module Level 3. Se hai familiarità con la sintassi della proprietà box-shadow, già conosci la sintassi di text-shadow perché sono quasi identiche.

ProprietàDescrizione

text-shadow

Elenco di ombreggiature separato da virgole che associa una o più ombreggiature al testo specificato. Ogni ombreggiatura è composta da un elenco delimitato da spazi di elementi seguenti:

  • horizontal offset  Obbligatorio. Un valore positivo disegna un'ombreggiatura con un offset a destra del testo, un valore negativo ne disegna una con un offset a sinistra.
  • vertical offset  Obbligatorio. Un valore positivo disegna un'ombreggiatura con un offset sotto il testo, un valore negativo ne disegna una con un offset sopra.
  • blur distance  Valori negativi non consentiti. Se il valore della sfocatura è zero, il bordo dell'ombreggiatura è nitido. Altrimenti, maggiore è il valore, maggiore sarà la sfocatura del bordo dell'ombreggiatura.
  • spread distance  Valori positivi provocano l'espansione della forma dell'ombreggiatura in tutte le direzioni rispetto al raggio specificato. Valori negativi provocano la contrazione della forma dell'ombreggiatura. Nota che questo valore potrebbe non essere supportato da tutti i browser.
  • color  Uno qualsiasi dei valori di colore supportati da CSS (Cascading Style Sheets).

 

La sintassi per la proprietà text-shadow è identica alla sintassi della proprietà box-shadow, tranne per il fatto che la proprietà text-shadow non riconosce la parola chiave inset.

L'esempio seguente applica un'ombreggiatura grigio scuro con un piccolo valore di sfocatura leggermente verso destra e al di sotto del testo specificato:


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

Se il selettore è applicato a un breve blocco di testo, il risultato è l'effetto seguente:

Testo "Internet Explorer 10" a cui è stata applicata un'ombreggiatura di testo grigio.

Nel sito del W3C è disponibile un'intera pagina di suggerimenti ed esempi della proprietà text-shadow: CSS: Testo Ombrato.

Informazioni di riferimento sulle API

text-shadow

Esempi ed esercitazioni

CSS Text-shadow sample
Come aggiungere divertenti effetti di testo mediante CSS

Dimostrazioni di Internet Explorer Test Drive

Dimostrazione pratica di text-shadow

Post di IEBlog

Moving to Standards-based Web Graphics in IE10
CSS3 text-shadow in IE10

Specifica

CSS Text Decoration Module Level 3: sezione 4

Argomenti correlati

Sfondi e bordi
Mastering CSS3: 7 cool text-shadow samples you can’t miss
Mastering CSS3: Text Shadows

 

 

Mostra:
© 2014 Microsoft