Ombre

The CSS Podcast - 017: Shadows

Supponiamo che ti sia stato inviato un design da creare e che in questo design sia presente l'immagine di una t-shirt, tagliata, con un'ombra. Il designer ti dice che l'immagine del prodotto è dinamica e può essere aggiornata tramite il sistema di gestione dei contenuti, quindi anche l'ombra deve essere dinamica. Anziché una t-shirt, l'immagine potrebbe essere un berretto, degli shorts o qualsiasi altro articolo. Come si fa con CSS?

CSS ha le proprietà box-shadow e text-shadow, ma l'immagine non è testo, quindi non puoi utilizzare text-shadow. Se utilizzi box-shadow, l'ombra è sulla scatola che la circonda, non intorno alla t-shirt.

Fortunatamente, esiste un'altra opzione: il filtro drop-shadow(). In questo modo puoi fare esattamente ciò che il designer ha richiesto. Esistono molte opzioni per le ombre in CSS, ciascuna progettata per un caso d'uso diverso.

Ombra riquadro

Browser Support

• 10
• 12
• 4
• 5.1

Source

La proprietà box-shadow serve per aggiungere ombre alla casella di un elemento HTML. Funziona su elementi di blocco ed elementi in linea.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

L'ordine dei valori per box-shadow è il seguente:

1. Offset orizzontale: un numero positivo lo espande verso sinistra e un numero negativo verso destra.
2. Offset verticale: un numero positivo lo spinge verso il basso dall'alto, mentre un numero negativo lo spinge verso l'alto dal basso.
3. Raggio di sfocatura: un numero maggiore produce un'ombra più sfocata, mentre un numero minore produce un'ombra più netta.
4. Raggio di diffusione (facoltativo): un numero maggiore aumenta le dimensioni dell'ombra e un numero minore le diminuisce, fino a renderle uguali a quelle del raggio di sfocatura se impostato su 0.
5. Colore: qualsiasi valore di colore valido. Se non è definito, verrà utilizzato il colore del testo calcolato.

Per fare in modo che un'ombra interna sia un'ombra interna, invece dell'ombra esterna predefinita, aggiungi una parola chiave inset prima delle altre proprietà.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Più ombre

Puoi aggiungere tutte le ombre che vuoi con box-shadow. Aggiungi una raccolta di insiemi di valori separati da virgole per ottenere questo risultato:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Proprietà che influiscono su box-shadow

L'aggiunta di un border-radius alla casella influisce anche sulla forma dell'ombra della casella. Questo accade perché il CSS crea un'ombra in base alla forma della casella, come se la luce fosse rivolta verso di essa.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Se la casella con box-shadow si trova in un contenitore con overflow: hidden, anche l'ombra non uscirà da questo overflow.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Ombreggiatura testo

Browser Support

• 2
• 12
• 3.5
• 1.1

Source

La proprietà text-shadow è molto simile alla proprietà box-shadow. Funziona solo sui nodi di testo.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

I valori di text-shadow sono gli stessi di box-shadow e nello stesso ordine. L'unica differenza è che text-shadow non ha un valore spread e non ha una parola chiave inset.

Quando aggiungi un box-shadow, questo viene ritagliato in base alla forma della casella, mentre text-shadow non viene ritagliato. Ciò significa che se il testo è completamente o semitrasparente, l'ombra è visibile al suo interno.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Più ombre

Puoi aggiungere tutte le ombre che vuoi con text-shadow, come con box-shadow. Aggiungi una raccolta di set di valori separati da virgole e potrai creare effetti di testo davvero fantastici, come il testo 3D.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Ombreggiatura

Per ottenere un'ombra che segua le potenziali curve di un'immagine, utilizza il filtro CSS drop-shadow. Questa ombra viene applicata a una maschera alfa, il che la rende molto utile per aggiungere un'ombra a un'immagine ritagliata, come nel caso dell'introduzione di questo modulo.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

Termine chiave: trattiamo i filtri CSS in un altro modulo, ma in breve, i filtri ti consentono di applicare più effetti grafici ai pixel di un elemento.

Il filtro drop-shadow ha gli stessi valori di box-shadow ma la parola chiave inset e il valore spread non sono consentiti. Puoi aggiungere tutte le ombre che vuoi, aggiungendo più istanze di valori drop-shadow alla proprietà filter. Ogni ombra utilizzerà l'ultima ombra come punto di riferimento per il posizionamento.

Verificare di aver compreso

Verifica le tue conoscenze sulle ombre

Quale valore shadow riportato di seguito è univoco per box-shadow?

Offset orizzontale

Riprova.

Offset verticale

Riprova.

Raggio sfocatura

Riprova.

Raggio di diffusione

🎉

Colore

Riprova.

inset

Riprova. inset è una parola chiave che è anche univoca per box-shadow.

In un elemento sono consentite solo 13 ombreggiature con effetto scatola contemporaneamente.

Vero

Non esiste un limite ufficiale.

Falso

Aggiungi tutte le ombre multiple necessarie.