Box Shadow Effect in CSS

Migliorare l'esperienza utente del tuo sito Web gioca una parte vitale nel catturare l'attenzione dell'utente. Esistono diversi modi in cui è possibile utilizzare per eseguire questa attività. Un modo ovvio è abbellire l'aspetto generale del tuo sito Web e che può essere fatto aggiungendo colori, immagini, animazioni sul sito Web. Un'altra cosa interessante che può migliorare l'aspetto del sito Web è vari tipi di effetti ombra. In CSS, ci sono due tipi di effetti ombra che sono text-shadow e box-shadow. In questo articolo, ti racconteremo tutto sull'effetto box-shadow.

CSS Box Shadow

Allo scopo di aggiungere ombre a vari elementi HTML, utilizzare la proprietà Box-Shadow. Di seguito abbiamo dimostrato vari modi in cui puoi usare per aggiungere ombra ai tuoi elementi HTML.

Aggiungi ombra orizzontale e verticale

Per aggiungere un effetto ombra su un determinato elemento in orizzontale e verticalmente semplicemente dare valori a entrambe le dimensioni della proprietà Box-Shadow. Considera il seguente esempio.

Html

Effetto ombra della scatola di apprendimento

Qui stiamo semplicemente creando un elemento div per dimostrare il concetto dell'effetto box-shadow.

CSS

div
larghezza: 250px;
Altezza: 150px;
imbottitura: 10px;
Background-color: bisque;
Box-Shadow: 9px 9px;

Usando CSS, stiamo fornendo una certa larghezza, altezza, imbottitura e colore di sfondo all'elemento Div. Infine, usando la proprietà Box-Shadow abbiamo dato 9px a dimensioni orizzontali e verticali dell'ombra. Si noti che l'ombra avrà lo stesso colore del testo presente all'interno dell'elemento Div.

Produzione

Un'ombra orizzontale e verticale è stata aggiunta al contenitore Div.

Aggiunta di colore all'ombra

Come già accennato, per impostazione predefinita, il colore dell'ombra sarà lo stesso di quello del contenuto presente all'interno dell'elemento, tuttavia, è possibile modificarne il colore specificandolo nella proprietà Box-Shadow. Utilizzare il seguente frammento di codice.

CSS

div
Box-Shadow: 9px 9px LightsEagreen;

Qui abbiamo specificato il colore dell'ombra.

Produzione

Un'ombra delle luci è stata aggiunta alla scatola.

Aggiungi un effetto sfocato all'ombra

Ai fini dell'aggiunta di sfocatura all'ombra, specificare l'intensità della confusione nella proprietà Box-Shadow. Segui l'esempio di seguito.

CSS

div
Box-Shadow: 9px 9px 7px RGB (32, 178, 170);

Abbiamo impostato l'intensità della sfocatura su 7px. Si noti che l'effetto sfocato migliora man mano che si aumenta l'intensità della sfocatura.

Produzione

Un effetto sfocato è stato aggiunto con successo.

Modificare le dimensioni dell'ombra

Per modificare le dimensioni dell'ombra puoi specificare l'intensità di diffusione dell'ombra. L'intensità di diffusione definisce sostanzialmente la diffusione dell'ombra piuttosto che la dimensione. Ecco come lo fai.

CSS

div
Box-Shadow: 9px 9px 7px 10px LightsEagreen;

Nel codice sopra, prima abbiamo impostato le dimensioni orizzontali e verticali dell'ombra su 9px, quindi abbiamo impostato l'intensità della confusione su 7px e infine abbiamo specificato l'intensità di diffusione come 10px.

Produzione

Viene applicata un'ombra con un'intensità di diffusione specifica come desiderato.

Nota: Per ridurre la diffusione dell'ombra, assegnare valori negativi al raggio di diffusione.

Tutti gli esempi sopra menzionati stanno dimostrando come aggiungere un'ombra esterna a un elemento. Tuttavia, puoi anche aggiungere un'ombra interna a un elemento.

Aggiungi un'ombra interna

A tale scopo, inserisci semplicemente un parametro inserto sulla proprietà Box-Shadow. Segui lo snippet di codice di seguito:

CSS

div
Box-Shadow: inserto 9px 9px 7px LightsEagreen;

Oltre a definire le dimensioni, il raggio sfocato e il colore dell'ombra, abbiamo trasformato l'ombra esterna in una interna usando "inserto".

Produzione

Un'ombra interna è stata aggiunta con successo.

Aggiunta di più ombre

Per aggiungere numerose ombre su un elemento, è possibile aggiungere un elenco di ombre alla proprietà box-shadow separata da virgole. Ecco un esempio.

CSS

div
Box-Shadow: 6px 6px LightsEagreen, 8px 8px Lightsalmon, 12px 12px LightskyBlue;

Qui stiamo aggiungendo tre ombre diverse, ogni ombra con dimensioni e colori specifici.

Produzione

Sono state aggiunte più ombre con successo.

Avere la conoscenza del raggio di diffusione, dell'ombra interna e delle ombre multiple puoi fare un'altra cosa divertente con le ombre. Considera l'esempio di seguito.

CSS

div
Box-Shadow: inserto 6px 6px 10px LightsEagreen,
inserto -6px -6px 10px Lightslategrey;

Nel codice sopra, stiamo aggiungendo due ombre interne sullo stesso elemento, ma entrambe le ombre hanno posizioni e colori diversi.

Produzione

Sono state aggiunte con successo due ombre interne.

Conclusione

Ai fini dell'aggiunta di un'ombra all'elemento HTML, viene utilizzata la proprietà CSS Box-Shadow. È necessario specificare la lunghezza dell'orizzontale e la dimensione verticale dell'ombra nella proprietà della scatola-Shadow. Puoi anche aggiungere colore e un effetto sfocato all'ombra di un elemento. A parte questo, la proprietà Box-Shadow ti consente di migliorare la diffusione di un'ombra o aggiungere un'ombra interna a un elemento. Questo tutorial è progettato per guidarti su vari modi che possono essere utilizzati per aggiungere un'ombra a un elemento.