2009
Oct
19

CSS3 e ombreggiatura sul testo

Con l’avvento della nuova specifica CSS3, si è cercato di venire incontro al webmaster per quanto riguarda le ombreggiature sui testi. In pratica non sarà più necessario creare i testi ombreggiati con i programmi di grafica per poi includere l’immagine ottenuta nella pagina web, scoraggiando così il navigatore che magari vorrà fare copia-incolla.

L’uso di text-shadow nei CSS3 è il seguente:

#div  {
text-shadow:1px 2px 3px #000;
}

“Text-shadow” crea l’ombra sotto al nostro testo, e le misure che ho messo nello specifico significano: spostamento dell’ombra di un pixel verso destra, di due pixel verso il basso, raggio di sfocatura di tre pixel, colore nero.

Interessante come sia possibile creare più ombre su uno stesso testo separando i valori con una virgola:

#div {
text-shadow:1px 2px 3px #000, 4px 5px 6px #fff;
}

Attenzione però, i CSS3 non sono ancora uno standard a tutti gli effetti, facciamo in modo quindi di rispettare la retrocompatibilità alle specifiche CSS2, quindi niente caratteri bianchi, sfumatura colorata e sfondo bianco, perché chi usa i CSS2 vedrà solo un bello sfondo bianco.

Al momento i browser supportati sono: Mozilla Firefox v.3, Opera, Konqueror, iCab. Per vedere se il browser supporta i CSS3 e la specifica text-shadow vi basterà dare un’occhiata al titolo degli articoli in questo sito o al menu laterale.

Add comment

Fill out the form below to add your own comments

User data





Add your comment


Admin