Paolo De Feo
a- a+

Effetto ombra sul testo con CSS3 Text Shadow. Anche su Internet Explorer 9

Vediamo come utilizzare al meglio la nuova proprietà di formattazione testi per il web.

CSS3 text-shadow (ombreggiatura testo CSS) è la nuova proprietà di formattazione testi per il web, introdotta nell’ultima release dei fogli di stile. Il testo ombreggiato tramite CSS3 è una novità grafica di facile implementazione a titoli, sottotitoli e blocchi di testo.

Il markup di realizzazione è facile e immediato:

h1
{
text-shadow: 2px 3px 3px #ff0000; 
}

In questo esempio è stato creato un titolo H1 (H1 heading) che presenta queste caratteristiche: il primo indica lo spostamento dell’ombra in orizzontale di 2 pixel (asse x), il secondo di 3 pixel in verticale (asse Y), il terzo definisce la sfocatura e il quarto il colore. I primi 2 elementi sono obbligatori e vengono sempre definiti prima in orizzontale poi in verticale. La sfocatura (blur) e il colore sono invece attributi facoltativi.

Impostando i pixel a zero si ottiene un effetto ombra di tipo definito, non sfumato:

h1
{
text-shadow:0 0 3px #FF0000;
}

Per quel che riguarda la compatibilità multipiattaforma, la proprietà CSS3 text-shadow è supportata in tutti i maggiori browser ad eccezione del software Microsoft. Infatti, CSS3 text-shadow su Internet Explorer non funziona regolarmente, se non ricorrendo a qualche piccolo trucco dai risultati poco esaltanti: i filtri proprietari Glow, Shadow e DropShadow.

 Ecco un esempio di sintassi con il filtro glow come protagonista:

<!--[if IE]>
p.glowParagrafo {
filter: glow(color=#0000ff,strength=3);
display: block;
width: 100%;
}<![endif]-->

Questo snippet di codice è stato isolato in un commento condizionale in quanto si tratta di una regola CSS non valida. L’effetto qui applicato verrà visualizzato solo con il browser Internet Explorer.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?