giapox.it

Geek Blog

Feed RSS Facebook Twitter Google+

CSS, Effetto Ombra sul Testo

CSS Effetto Ombra sul Testo

Oggi torno a parlare di uno de miei principali interessi legati al mondo di Internet: il web design.

E, più nello specifico, spiegherò come dare un “tocco di classe” ai testi di un sito web aggiungendo un’ombra al testo, senza l’ausilio delle immagini, ma usando solamente i fogli di stile.

Con i CSS è possibile aggiungere un’ombra al testo

La proprietà CSS che permette questo è text-shadow.
Questa proprietà fino a poco fa era supportata solamente da Safari ed Opera, adesso, anche FireFox e Google Chrome supportano l’utilizzo di text-shadow e, quindi, mi sembra sufficiente per iniziare ad utilizzarla, visto che tra i browser più diffusi manca soltanto Internet Explorer all’appello.

Il suo funzionamento è semplicissimo, in pratica vanno impostati quattro parametri: spostamento dell’ombra verso destra e verso il basso, il grado di sfocatura (espresso in pixel) ed il colore dell’ombra.

Ad esempio, se volessimo assegnare un’ombra di colore grigio al titolo h2 dovremmo scrivere:

h2 { text-shadow: 3px 3px 4px #666; }

Esiste anche la possibilità di assegnare più ombre ad un unico testo, per fare ciò basta separare i valori con una virgola:

h2 { text-shadow: 3px 3px 4px #666, 1px 3px 5px #000; }

Questa funzione, però, è supportata soltanto da Opera per il momento.

Visto che la proprietà text-shadow non è ancora supportata da Microsoft Internet Explorer consiglio di fare attenzione quando viene utilizzata, e di verificare la “leggibilità” del testo con tutti i principali browser.

Anche se la maggioranza dei navigatori non vedrà l’ombra, basterà evitare di usare testi su background dello stesso colore per fare in modo che il testo sia leggibile sia su quei browser che supportano la proprietà text-shadow sia su quelli che non la supportano.

Per tutti coloro che fossero interessati all’evoluzione dei CSS e al loro relativo supporto da parte dei vari browser, segnalo The Future of Style, un’ottima risorsa messa a disposizione dal W3C.

Autore: Gianluca

Nessun commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

5 × 4 =