Effetti di ombra CSS

Caffè
Ombre

Crea effetti di ombra con CSS!

Hover qui sopra!

Effetti di ombra CSS

Utilizzando CSS, è possibile aggiungere ombre al testo e agli elementi.

Nel nostro tutorial, imparerai le seguenti proprietà:

  • text-shadow
  • box-shadow

Ombra di testo CSS

CSS text-shadow L'attributo aggiunge un'ombra al testo.

L'uso più semplice è specificare solo l'ombra orizzontale (2px) e l'ombra verticale (2px):

Effetto di ombra di testo!

Esempio

h1 {
  text-shadow: 2px 2px;
}

Prova da solo

Prossimamente, aggiungi un colore all'ombra:

Effetto di ombra di testo!

Esempio

h1 {
  text-shadow: 2px 2px red;
}

Prova da solo

Poi, aggiungi un effetto sfocatura all'ombra:

Effetto di ombra di testo!

Esempio

h1 {
  text-shadow: 2px 2px 5px red;
}

Prova da solo

Esempio seguente mostra il testo bianco con ombra nera:

Effetto di ombra di testo!

Esempio

h1 {
  color: bianco;
  text-shadow: 2px 2px 4px #000000;
}

Prova da solo

Esempio seguente mostra l'effetto di ombra luminosa a neon di rosso:

Effetto di ombra di testo!

Esempio

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

Prova da solo

Ombre multiple

Per aggiungere più ombre al testo, è possibile aggiungere una lista di ombre separate da virgola.

Esempio seguente mostra l'effetto di ombra luminosa a neon di rosso e blu:

Effetto di ombra di testo!

Esempio

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Prova da solo

Esempio che mostra un testo bianco con ombre nere, blu e scuroblu:

Effetto di ombra di testo!

Esempio

h1 {
  color: bianco;
  text-shadow: 1px 1px 2px nero, 0 0 25px blu, 0 0 5px scuroblu;
}

Prova da solo

Puoi anche utilizzare l'attributo text-shadow per creare un bordo puro intorno al testo (senza ombra):

Bordo di testo circondato!

Esempio

h1 {
  color: giallo;
  text-shadow: -1px 0 nero, 0 1px nero, 1px 0 nero, 0 -1px nero;
}

Prova da solo