Podcast su CSS - 017: Shadows
Supponiamo che ti sia stato inviato un progetto per costruire e che in quel design sia presente l'immagine di una maglietta, ritagliata, con un'ombra. Il designer ti informa che l'immagine prodotto è dinamica e può essere aggiornata tramite il sistema di gestione dei contenuti, pertanto anche l'ombra deve essere dinamica. Invece di una maglietta, l'immagine potrebbe essere una visiera, dei pantaloncini o di qualsiasi altro oggetto. Come puoi farlo con il CSS?
Il 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 si trova sulla casella circostante,
non attorno alla maglietta.
Fortunatamente, esiste un'altra opzione: il
filtro drop-shadow().
In questo modo puoi fare esattamente ciò che il designer ha chiesto.
Esistono tante opzioni per quanto riguarda le ombre in CSS,
ognuna progettata per un caso d'uso diverso.
Ombra riquadro
La proprietà box-shadow consente di aggiungere ombre al riquadro di un elemento HTML.
Funziona sugli elementi a blocco e in linea.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
L'ordine dei valori per box-shadow è il seguente:
- Offset orizzontale: un numero positivo lo spinge in uscita da sinistra, mentre un numero negativo lo spinge in uscita da destra.
- Offset verticale: un numero positivo lo spinge verso il basso dalla parte superiore, mentre un numero negativo lo spinge verso l'alto dalla parte inferiore.
- Raggio di sfocatura: un numero più grande produce un'ombra più sfocata, mentre un numero piccolo produce un'ombra più nitida.
- Raggio di diffusione (facoltativo): un numero maggiore aumenta la dimensione dell'ombra, mentre un numero più piccolo la diminuisce, rendendo le stesse dimensioni del raggio di sfocatura, se impostato su 0.
- Colore: qualsiasi valore colore valido. Se non è specificato, viene utilizzato il colore del testo calcolato.
Per applicare l'ombreggiatura di una casella a 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;
}
Ombre multiple
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 influiscono sull'ombreggiatura
L'aggiunta di border-radius alla casella inciderà anche sulla forma dell'ombra della casella.
Questo perché CSS crea un'ombra sulla base della forma del riquadro,
come se la luce la puntasse.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
Se la casella con box-shadow si trova in un container che contiene overflow: hidden,
anche 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 relativi a text-shadow sono uguali a quelli di box-shadow e nello stesso ordine.
L'unica differenza è che text-shadow non ha nessun valore spread né parola chiave inset.
Quando aggiungi un elemento box-shadow, questo viene ritagliato in base alla forma della tua casella,
ma text-shadow non presenta clip.
Ciò significa che, se il testo è completamente o semitrasparente,
è visibile l'ombra.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Ombre multiple
Puoi aggiungere tutte le ombre che vuoi con text-shadow,
proprio come con box-shadow.
Se aggiungi una raccolta di insiemi di valori separati da virgole,
potrai creare effetti di testo davvero accattivanti, 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 CSS.
Questa ombra viene applicata a una maschera alfa e ciò rende l'aggiunta di 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%))
}
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.
Verifica la tua comprensione
Verifica la tua conoscenza delle ombre
Quale valore ombra di seguito è univoco per box-shadow?
insetinset è una parola chiave che è univoca anch'essa univoca per box-shadow.Su un elemento sono consentite solo 13 ombre alla volta.