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 apprendimentoQui stiamo semplicemente creando un elemento div per dimostrare il concetto dell'effetto box-shadow.
CSS
divUsando 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
divQui 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
divAbbiamo 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
divNel 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
divOltre 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
divQui 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
divNel 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.