Ombre

Podcast CSS - 017: Shadows .

Supponiamo che ti venga inviato un design da costruire e che abbia l'immagine di una maglietta. tagliato, con un'ombra. Il designer ti comunica che l'immagine prodotto è dinamica e possono essere aggiornati tramite il sistema di gestione dei contenuti, quindi anche l'ombra deve essere dinamica. Invece di una maglietta, l'immagine potrebbe essere una visiera, un paio di pantaloncini o qualsiasi altro oggetto. Come puoi farlo con il CSS?

Il CSS ha box-shadow e text-shadow proprietà, ma l'immagine non è testo, quindi non puoi usare text-shadow. Se utilizzi box-shadow, l'ombra è sulla casella circostante, non intorno alla maglietta.

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

Ombra riquadro

La proprietà box-shadow consente di 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 spinge fuori da sinistra, mentre un numero negativo lo spinge fuori da destra.
2. Offset verticale: un numero positivo lo spinge verso il basso dall'alto, e un numero negativo lo spingerà verso l'alto dal basso.
3. Raggio sfocatura: un numero maggiore produce un'ombra più sfocata, mentre un numero ridotto produce un'ombra più nitida.
4. (Facoltativo) Raggio di distribuzione: a un numero maggiore aumenta la dimensione dell'ombra, mentre a un numero minore la diminuisce, in modo che abbia le stesse dimensioni 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 trasformare l'ombra di una casella in un'ombra interna, anziché l'ombra esterna predefinita, aggiungere 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. A questo scopo, aggiungi una raccolta di insiemi di valori separati da virgole:

.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 interessano box-shadow

L'aggiunta di un border-radius al riquadro influirà anche sulla forma dell'ombra della casella. Questo perché il CSS crea un'ombra in base alla forma del rettangolo come se fosse la luce a puntare su di esso.

.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, nemmeno l'ombra non uscirà dall'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

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 per text-shadow sono gli stessi di box-shadow e nello stesso ordine. L'unica differenza è che text-shadow non ha un valore spread né una parola chiave inset.

Quando aggiungi un elemento box-shadow, questo viene adattato alla forma della scatola, ma text-shadow non ha tagli. Ciò significa che se il testo è completamente o semitrasparente, l'ombra è visibile attraverso di esso.

.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, proprio come per box-shadow. Aggiungi una raccolta di insiemi di valori separati da virgole, e potrai creare effetti di testo davvero interessanti, 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 tutte le potenziali curve di un'immagine: utilizza il filtro drop-shadow di CSS. Questa ombra viene applicata a una maschera alfa, perciò è molto utile per aggiungere un'ombra a un'immagine di ritaglio. come nell'introduzione di questo modulo.

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

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 dei valori drop-shadow alla proprietà filter. Ogni ombra utilizzerà l'ultima ombra come punto di riferimento per il posizionamento.

Verifica le tue conoscenze

Metti alla prova le tue conoscenze sulle ombre