Bert Boscreato il 4 Aug 2005;
ultimo aggiornamento: vedi documento originale
it
Home Italiano -
Originale Inglese;
Traduzione di Ratoize: il mio blog;
Consulenza lingua Inglese: English Conversation;
Ultimo aggiornamento traduzione: 30 Mag 2008;
(This page uses CSS style sheets)
Il CSS di livello 3 ha una proprietà chiamata 'text-shadow' per aggiungere un'ombra ad ogni lettera di un testo. Nella sua forma più semplice, assomiglia a qualcosa del genere:
h3 {text-shadow: 0.1em 0.1em #333}
La quale aggiunge un'ombra grigio scuro (#333) spostata un po' verso destra (0.1em) e il basso (0.1em) rispetto al testo normale. Il risultato potrebbe essere questo:
(Ad Agosto 2005, non ancora tutti i browser supportano pienamente 'text-shadow'. Quanto sopra dovrebbe funzionare almeno in Safari e Konqueror.)
Nella forma più semplice la proprietà 'text-shadow' ha due parti: il colore (come il #333 di sopra) e l'offset (0.1em 0.1em nell'esempio di sopra). Questo dà luogo ad un ombra nitida all'indicato offset. Ma si può anche rendere l'ombra più o meno sfocata.
Il grado di sfocatura è dato con un altro parametro. Ecco due righe, una poco sfocata (0.05em) e l'altra molto di più (0.2em).
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Le ombre possono rendere il testo più leggibile se il contrasto tra testo e sfondo è basso. Ecco un esempio di testo bianco su sfondo blu pallido, prima senza e poi con ombra:
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Without shadow:
With shadow:
Si può anche avere più di un ombra. Di solito è abbastanza strano:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
Ma piazzando bene due ombre, chiara e scura, l'effetto può essere utile:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}
Questo è un po' pericoloso, come si vede se il browser non supporta 'text-shadow'. Infatti, i colori dello sfondo e del testo in questo esempio sono quasi gli stessi (#CCCCCC and #D1D1D1), quindi senza ombre, c'è appena un minimo di contrasto.
L'esempio precedente delle due ombre può essere ulteriormente sviluppato. Con quattro ombre, si può dare un contorno alle lettere:
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
Non è un contorno perfetto, e nel momento in cui scrivo (Agosto 2005), la discussione sul CSS è ancora aperta se debba avere una proprietà separata (o forse un valore per 'text-decoration') per rendere meglio i contorni.
Se si mette un ombra sfocata giusto dietro il testo, p.e., con offset pari a zero, l'effetto è di creare una luminosità attorno alle lettere. Se la luminosità di una sola ombra non è intensa abbastanza, semplicemente ripetere la stessa ombra alcue volte.
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}