Ombreggiatura del testo con CSS3

di Matteo Casati, in HTML5, CSS3,

Tra gli effetti che è possibile applicare al testo con CSS3 c'è l'ombreggiatura, definita tramite la proprietà text-shadow che richiede di specificare nell'ordine:

  • scostamento orizzontale (horizontal offset): con valori positivi l'ombreggiatura viene disegnata alla destra del testo mentre con valori negativi alla sua sinistra;
  • scostamento verticale (vertical offset): con valori positivi l'ombreggiatura viene disegnata sotto al testo mentre con valori negativi sopra;
  • raggio di sfocatura: piùè grandepiù l'ombra risulterà leggera e sfumata; questo parametro è opzionale;
  • colore dell'ombreggiatura.

Nell'esempio seguente viene applicata un'ombreggiatura grigia spostata in basso a sinistra ai titoli H1:

<style>
h1
{
  text-shadow: -5pt 2pt 4pt #999;
}
</style>

È possibile definire ombreggiature multiple immettendo diverse impostazioni (scostamento, sfocatura e colore) separate da virgola.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi