CSS  »  Articoli  »  CSS 3 

Effetto ombra sul testo

La proprietà CSS text-shadow è stata introdotta con i CSS2, per poi essere eliminata nei CSS2.1 . È finalmente tornata con i CSS3, ed è attualmente supportata solo da Safari. Vediamo subito l'esempio e il suo screenshot:

Figura 2 - testo con ombra con i CSS3 e Safari

Ecco il CSS dell'esempio per quanto riguarda l'ombra:

La proprietà text-shadow accetta 4 valori, che sono nell'ordine:

• il colore dell'ombra
• la sua traslazione orizzontale: un valore positivo la traslerà verso sinistra, mentre uno negativo verso destra
• la sua traslazione verticale: un valore positivo la traslerà verso il basso, mentre uno negativo verso l'alto
• Il raggio di sfuocatura dell'ombra: al valore zero corrisponde un ombra netta, non sfumata

C'è da evidenziare che, sebbene l'effetto ottenuto con questa proprietà risulti molto accattivante, andrebbe usata con parsimonia. In particolare, potrebbe essere indicata su titoli e menu, ma a parer mio non andrebbe mai usata sul corpo del testo di una pagina web, per non comprometterne troppo la leggibilità. Inoltre è indispensabile ovviamente assicurarsi una leggibilità sufficiente soprattutto in assenza del supporto di questa proprietà nei vari browser e garantire quindi e comunque un buon contrasto tra testo e sfondo indipendentemente dall'ombra.

Drop shadow

L'effetto ombra non è solo possibile sul testo: i CSS3 infatti consentono di ottenere ombreggiature anche su altri elementi arbitrari di pagina attraverso la proprietà box-shadow. Al momento in cui scrivo, solo Safari (versione 3 o con Webkit aggiornato) implementa questa proprietà, a cui antepone il prefisso -webkit-. Vediamo l'esempio e un suo screenshot di resa proprio su Safari:

Figura 3 - div con effetto ombra

Ecco la parte del CSS dell'esempio relativo all'ombra, aggiunto come negli altri esempi da Javascript:

I valori ammessi dalla proprietà box-shadow sono nell'ordine: la traslazione orizzontale, quella verticale, la profondità dell'ombra e il suo colore. Da notare che nel codice dell'esempio ho anche incluso la proprietà standard box-shadow, così da averla già pronta nel caso in cui venga implementata dalle future versioni dei browser. Un accorgimento è da tenere però sempre presente: quando succederà, bisognerà accertarsi se il numero o l'ordine dei valori ammessi dovesse cambiare. Da notare che questa proprietà, attualmente supportata solo da Safari, è utilizzabile anche in combinazione con gli angoli arrotondati, che sono il prossimo argomento.

Altri articoli

Altre guide

Altre newsletter