Scritto da
Lunedì, 24 Marzo 2014

Regola CSS Text-shadow

 Ecco un’altra regola CSS molto ma molto carina. L’effetto ombreggiato a volte fa la differenza! Perché allora non implementarlo ad esempio nei nostri H1, H2,H3, ecc..?

Bene, vediamone un esempio:

Text-shadow

2. Effetti tipografici: Text Shadow
Ombreggiature applicate al testo per dare un effetto tipografico “d’effetto”:

#esempio {
text-shadow: 3px 4px 2px #888;
}

- Il primo valore rappresenta lo scostamento orizzontale del testo ombreggiato rispetto a quello originale.

- Il secondo valore imposta lo scostamento verticale del testo ombreggiato rispetto a quello originale.

- Il terzo esprime quanto deve essere sfumato il testo per mezzo della lunghezza di un raggio di sfumatura.

- Il quarto definisce il colore dell’ombreggiatura.

Modificando e smanettando con questi parametri si possono ottenere numerosi effetti, come il bagliore e la sfocatura.

Effetto Multiplo
Ma un effetto di ombreggiatura può essere anche multiplo, aggiungendo altri valori avendo cura di separare ogni set di quattro valori con una virgola ed uno spazio. Vediamo come:

#esempio {
text-shadow: 0 0 4px #000, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}

In cui i valori negativi dello scostamento orizzontale posizionano l’ombra a sinistra del testo, mentre i valori negativi dello scostamento verticale posizionano l’ombra al di sopra del testo.

Piccoli accorgimenti che aumentano in positivo “l’appeal” dei nostri siti.

Letto 1319 volte
Vota questo articolo
(0 Voti)

Forse ti possono interessare anche questi articoli:

Lascia un commento

Assicurati di inserire (*) le informazioni necessarie ove indicato.
Codice HTML non è permesso.