CSS  »  Articoli  »  CSS 3 

Per verificare quanto sia cruciale una corretta valutazione del valore per la sfocatura, abbiamo preparato il secondo esempio. Diamo uno sguardo al codice:

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

Come si vede, manca del tutto l'indicazione per il blur: equivale a scrivere 0 o 0px. Il risultato è ben diverso rispetto al primo caso, l'ombra piatta più che evidenziare il testo lo confonde agli occhi di chi legge.

Quanto appena detto non deve impedirci però di sperimentare. Bastano pochi tocchi per ottenere risultati interessanti senza sacrificare la leggibilità. Nel terzo esempio abbiamo apportato una piccola modifica. Al valore per l'asse verticale abbiamo assegnato un numero negativo, -2px:

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

Effetti interessanti si possono creare anche agendo sulla sfocatura. Aumentando il valore oltre i 2/3px si può ottenere un effetto alone, come nel quarto esempio, in cui abbiamo azzerato lo spostamento dell'ombra intervenendo solo sul blur e usando lo stesso colore (nero) del testo:

p {text-shadow: 0px 0px 8px #000;}

La specifica prevede anche la possibilità di creare ombre multiple, con valori diversi per ciascun fattore, a partire dal colore. Tre le ombre usate nel quinto esempio:

p {text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em red;}

A livello di sintassi si noti che i valori per ciascuna ombra vanno separati dagli altri con la virgola. Di fatto la regola appare strutturata come un insieme di tre blocchi separati da virgola, uno per ciascuna ombra.

Per il supporto delle ombre multiple si tenga comunque presente quanto specificato a margine della tabella con il supporto dei vari browser.

Dopo aver segnalato questa pagina creata da Thiemo Mättig, molto utile per esplorare le possibilità creative di text-shadow, ricordiamo che tutti gli esempi visti nell'articolo sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter