Effetti ombra CSS

Con i CSS si può aggiungere ombre al testo e agli elementi.

In questi capitoli imparerai a conoscere le seguenti proprietà:

• text-shadow
• box-shadow

Ombra del testo CSS

La proprietà CSS text-shadow applica l'ombra al testo.

Nel suo utilizzo più semplice, specifichi solo l'ombra orizzontale (2px) e l'ombra verticale (2px):

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

Visualizza esempio

Successivamente, aggiungi un colore all'ombra:

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

Visualizza esempio

Quindi, aggiungi un effetto sfocato all'ombra:

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

Visualizza esempio

L'esempio seguente mostra un testo bianco con ombra nera:

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

Visualizza esempio

L'esempio seguente mostra un'ombra di bagliore rosso al neon:

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

Visualizza esempio

Ombre multiple

Per aggiungere più di un'ombra al testo, puoi aggiungere un elenco di ombre separate da virgole.

L'esempio seguente mostra un'ombra di bagliore al neon rosso e blu:

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

Visualizza esempio

L'esempio seguente mostra un testo bianco con ombre nere, blu e blu scuro:

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Visualizza esempio

Puoi anche utilizzare la proprietà text-shadow per creare un bordo semplice attorno al testo (senza ombre):

h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Visualizza esempio

Proprietà box-shadow CSS

La proprietà CSS box-shadow viene utilizzata per applicare una o più ombre a un elemento.

Specificare un'ombra orizzontale e verticale

Nel suo utilizzo più semplice, specifichi solo un'ombra orizzontale e verticale. Il colore predefinito dell'ombra è il colore del testo corrente.

Esempio

Specificare un'ombra orizzontale e verticale:

div {
  box-shadow: 10px 10px;
}

Visualizza esempio

Specificare un colore per l'ombra

Il parametro color definisce il colore dell'ombra.

div {
  box-shadow: 10px 10px lightblue;
}

Visualizza esempio

Aggiungi un effetto sfocato all'ombra

Il parametro blur definisce il raggio di sfocatura. Più alto è il numero, più sfocata risulterà l'ombra.

div {
  box-shadow: 10px 10px 5px lightblue;
}

Visualizza esempio

Impostare il raggio di diffusione dell'ombra

Il parametro spread definisce il raggio di diffusione. Un valore positivo aumenta la dimensione dell'ombra, un valore negativo la diminuisce.

div {
  box-shadow: 10px 10px 5px 12px lightblue;
}

Visualizza esempio

Impostare il parametro inset

Il parametro inset cambia l'ombra da un'ombra esterna (inizio) a un'ombra interna.

div {
  box-shadow: 10px 10px 5px lightblue inset;
}

Visualizza esempio

Aggiungere più ombre

Un elemento può anche avere più ombre:

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Visualizza esempio

Cards

Si può anche utilizzare la proprietà box-shadow per creare tessere simili alla carta:

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Esempio (Text Card)

Esempio (Image Card)

Proprietà dell'ombra CSS