Tutorial CSS Box Shadow: una guida passo passo (+ esempi)

Perché la proprietà CSS box-shadow merita un proprio tutorial? Perché, come vedrai di seguito, è una delle proprietà più complesse che prende più valori contemporaneamente. Questo potrebbe rendere particolarmente difficile per i principianti.

Se finora hai lottato con l'uso corretto box-shadow , sei nel posto giusto. Nella guida di seguito, esamineremo tutto ciò che c'è da sapere su questa proprietà CSS. Parleremo di quello che fa, di come usare correttamente la sua sintassi, di alcuni fantastici esempi box-shadow CSS e infine di alcuni strumenti generatori che semplificano il lavoro con esso.

Cos'è CSS Box Shadow?

Anche se fino ad ora non sei a conoscenza della proprietà box-shadow CSS, probabilmente l'hai vista in azione sul web.

Sopra c'è un buon esempio di come appare in natura (anche se l'ho aumentato leggermente qui per fare un punto). box-shadow è fondamentalmente ciò che dice il nome: ti consente di aggiungere un'ombra discendente alla cornice di quasi tutti gli elementi. L'ombra aderirà anche alla forma della sua ancora, che sia quadrata, rettangolare, rotonda o ovale. Ciò vale anche quando è stata impostata una proprietà border-radius .

In giro per il web, le persone lo usano per creare una serie di effetti diversi e vedremo alcuni interessanti esempi box-shadow seguito. Per ora, parliamo di come funziona al livello più elementare.

Sintassi dell'ombra della casella di base

Quando guardi un elemento con un'ombra box usando gli strumenti di sviluppo del browser, troverai markup come questo:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Sembra un po' complicato, vero?

Ma non preoccuparti, non hai bisogno di tutte queste dichiarazioni in ogni momento. Inoltre, una volta capito come funzionano, non sembra più confuso come all'inizio.

Come puoi vedere sopra, box-shadow può richiedere fino a sei valori. Esaminiamoli uno per uno.

offset-x

Il primo valore è la distanza orizzontale dell'ombra discendente dal lato del suo elemento di ancoraggio. Un valore positivo lo sposta a destra, uno negativo a sinistra.

Puoi utilizzare tutti i tipi di dati CSS comuni che denotano la lunghezza per questo valore, come px , em , vh e altro. I più comunemente usati sono px ed em .

offset-y

Come sopra ma per l'asse verticale. Il valore positivo sposta l'ombra sotto l'elemento, quelli negativi sopra.

raggio di sfocatura

Questo definisce la sfocatura dell'ombra del riquadro. Più alto è il valore, più sfocato sarà. blur-radius accetta anche tutte le denominazioni di lunghezza CSS comuni ma nessun valore negativo.

raggio di diffusione

Questo controlla la diffusione dell'ombra oltre l'altezza o la larghezza del suo elemento. Maggiore è la lunghezza, maggiore è lo spread. Puoi anche usare numeri negativi per introdurre il restringimento.

colore

Come probabilmente puoi intuire, questo ti consente di definire il colore dell'ombra del riquadro in tutti i soliti modi. È più spesso indicato con valori esadecimali (ad esempio #ededed ) o rgba (ad esempio rgba(46, 182, 142, 0.9) ). Quest'ultimo consente anche di controllare l'opacità, che è comunemente usata per le ombre discendenti.

Nota, se non imposti un colore, il browser utilizzerà il colore del testo attualmente utilizzato.

inserto

Infine, puoi facoltativamente aggiungere un inset all'inizio della dichiarazione. Questo cambia l'ombra da un'ombra discendente a un'ombra all'interno dell'elemento. Appare all'interno del bordo, sopra lo sfondo, ma sotto il contenuto dell'elemento, quindi non coprirà il testo, ad esempio.

Usare i valori in ordine

Ecco l'ordine in cui vengono visualizzati i valori della proprietà box-shadow .

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Per assegnare un'ombra di riquadro, sono necessari almeno due valori di lunghezza. Il browser utilizzerà automaticamente quelli per offset-x e offset-y . Se ne aggiungi una terza, verrà interpretata come blur-radius , una quarta come spread-radius . l' inset e color sono opzionali e possono apparire alla fine o all'inizio e in qualsiasi ordine. I CSS di seguito avranno tutti lo stesso risultato.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

Assegnazione di più Box Shadows

Qualcosa di cui non tutti sono a conoscenza è che puoi impostare più ombre del riquadro per lo stesso elemento. Per questo, fornisci semplicemente più di un gruppo di valori e separali con virgole.

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

Il codice sopra risulta simile a questo:

Puoi anche usarlo per creare linee attorno agli elementi. Per questo, devi semplicemente aggiungere diverse ombre in diversi colori e impostare i loro offset e sfocatura su zero.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Ciò si traduce in contorni con colori diversi:

Tieni presente che ciò non influisce sulle dimensioni del modello di riquadro, quindi le ombre del riquadro non si aggiungono alla dimensione complessiva di un elemento come faranno il margin o il border .

Compatibilità del browser

La compatibilità del browser per box-shadow non è davvero qualcosa di cui devi preoccuparti. È una proprietà CSS molto consolidata accettata praticamente da tutti i browser, incluso il markup come l' inset e le ombre multiple.

Per supportare le versioni precedenti di alcuni browser, è comune includere le -webkit-box-shadow e -moz-box-shadow con gli stessi valori. Tuttavia, per le ultime versioni dei browser più comuni questo non è più necessario.

Esempi di CSS Box Shadow

Successivamente in questo tutorial box-shadow , vogliamo esaminare alcuni esempi di box shadow CSS in modo da poter vedere cosa è possibile fare con questa proprietà. Passeremo da applicazioni piuttosto standard a quelle più straordinarie perché, come vedrai, puoi fare cose davvero eccitanti con essa.

Aggiungi un'ombra a un pulsante

I pulsanti sono spesso un elemento a cui è applicata un'ombra di riquadro. Questo perché è un buon modo per farli risaltare sulla pagina. Dopotutto, se includi un pulsante, di solito vuoi che le persone facciano clic su di esso. Per invitarli a farlo, ecco un semplice esempio di come farlo con un'ombra box.

Il markup di accompagnamento è simile al seguente:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Soft Box Ombra

Se vuoi creare un'ombra del riquadro CSS relativamente morbida, lavori principalmente con sfocatura e diffusione mentre imposti gli offset su 0 . In questo modo, l'ombra non assume una forma distinta ma appare solo leggermente attorno ai bordi.

Per ottenere l'effetto sopra, puoi utilizzare il seguente markup:

 box-shadow: 0 0 50px 10px #999;

Questo è anche un ottimo modo per creare un'ombra su tutti i lati di un elemento. Se vuoi renderlo più distinto, aumenta semplicemente la diffusione, attenua la sfocatura e usa un colore più scuro.

Ombre multiple della scatola

Gli esempi finali box-shadow riguardano l'utilizzo di più ombre contemporaneamente. Questo offre diverse possibilità. Per uno, puoi introdurre un'ombra a scatola in più fasi che sbiadisce.

È sorprendentemente semplice: devi solo impilare le ombre del riquadro l'una sull'altra con offset uniformemente crescenti e allo stesso tempo ridurre l'opacità. A proposito, quando si usano molti box shadow, è utile scrivere le dichiarazioni in righe separate piuttosto che come una lunga dichiarazione. Rende molto più facile la comprensione.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

Puoi anche andare oltre introducendo le ombre del riquadro bianco con un valore spread-radius negativo nel mezzo, con conseguente illusione di diversi elementi uno sopra l'altro.

Perché il valore dello spread negativo? Perché altrimenti le ombre del riquadro bianco coprirebbero quelle sotto di loro. Il valore negativo li rimpicciolisce in modo che il colore dietro possa trasparire. Di seguito è riportato il markup di cui hai bisogno se desideri introdurre un effetto simile sul tuo sito Web:

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

L'esempio finale per diverse ombre dei riquadri CSS è il metodo sopra menzionato per impostare offset e sfocatura su 0 . Come abbiamo visto sopra, risulta in un elemento con diversi contorni, in questo caso colorati. Tuttavia, questo funziona solo perché il valore spread-radius aumenta per ciascuna ombra del riquadro.

Se vuoi provarlo tu stesso, puoi iniziare con questo:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

I migliori generatori di ombre a scatola

Come abbiamo spiegato, box-shadow richiede moltissimi valori. Pertanto, possono essere necessari un po' di tentativi ed errori prima di arrivare al tipo di ombra che desideri.

Per semplificare, ci sono un sacco di strumenti per la generazione di ombretti che ti permettono di giocare con i loro controlli, vedere subito i risultati e quindi copiare semplicemente il markup una volta soddisfatto.

Ecco le migliori opzioni per i generatori di ombre box:

• box-shadow.dev — Questo strumento monouso ha tutte le funzionalità di cui hai bisogno e la migliore interfaccia utente del gruppo. Puoi usare inset , creare diverse ombre del riquadro, controllare gli offset, la sfocatura e la diffusione tramite i cursori e inserire i colori manualmente. Quando sei soddisfatto, fai clic su Mostra codice per copiare il markup CSS. L'unico aspetto negativo è che non fornisce codice per i browser meno recenti.
• CSSmatic Box Shadow CSS Generator — Simile a quanto sopra. Ti consente di controllare le proprietà box-shadow tramite i cursori e anche di inserire i numeri manualmente. Ha il proprio controllo per l'opacità, il che è carino. D'altra parte, manca la funzionalità per più ombre. Il markup del codice che ottieni include i browser meno recenti.
• Box Shadow CSS Generator: un'opzione solida che ha anche una capacità di selezione del colore e fornisce codice anche per browser più vecchi. Puoi copiarlo con un semplice clic. Ha il controllo dell'opacità ma può creare solo un'ombra discendente.
• CSS3gen CSS3 Box Shadow Generator — Un altro generatore di ombre. Una caratteristica interessante qui è che, invece degli offset xey, puoi selezionare l'angolo e la distanza dell'ombra e lo strumento farà il resto automaticamente. Per qualche motivo spread-radius e l' inset hanno il loro menu. Il CSS che puoi semplicemente copiare e incollare include anche il markup per le generazioni di browser precedenti.

Considerazioni finali: CSS Box Shadow

La proprietà box-shadow può essere schiacciante all'inizio. È una di quelle proprietà che richiede molti valori, quindi potrebbe sembrare più complicata di quanto non sia in realtà. Si spera che questo tutorial CSS box-shadow abbia messo a tacere quella sensazione.

Sopra, abbiamo esaminato cos'è CSS box-shadow e come funziona. Abbiamo spiegato la sintassi, i valori e come funzionano insieme. Inoltre, abbiamo esaminato una serie di esempi su come utilizzare le ombre dei box CSS nella vita reale, incluso il markup che puoi utilizzare subito. Infine, per coloro che vogliono un piccolo aiuto, abbiamo elencato una serie di generatori box-shadow CSS che possono fare molto del lavoro pesante per te.

A questo punto, dovresti sentirti in grado di utilizzare questa funzione CSS sul tuo sito web. Non vediamo l'ora di vedere cosa ne fai.

Come stai usando CSS box shadow sul tuo sito web? Qualche caso d'uso interessante che non abbiamo trattato sopra? Fateci sapere nei commenti qui sotto!