HTML è il linguaggio utilizzato per fornire la struttura delle pagine Web e CSS ci consente di applicare stili agli elementi. Su una pagina Web, diversi valori delle proprietà sono impostati per applicare stili diversi, come colore di base, dimensioni dei caratteri, bordo, radiio di confine e box-shadow è uno di questi.

Questo blog discuterà il metodo per applicare gli effetti ombra agli elementi HTML.

Come abbandonare l'effetto ombra sugli elementi HTML usando CSS?

IL "Box-Shadow"La proprietà aggiunge un'ombra attorno a un elemento in cui due o più valori di effetto aggiunto possono essere separati dalle virgole.

La sintassi della proprietà Box-Shadow è descritta di seguito.

Sintassi

Box-Shadow: Nessuno | H-offset H-offset Blur Spread Color | Inserto | iniziale | eredità;

La descrizione della sintassi sopra menzionata è elencata di seguito:

• "nessuno": È il valore predefinito della proprietà Box-Shadow.
• "H-offset": Questo valore rappresenta la distanza orizzontale.
• "V-offset": Questo valore definisce la distanza verticale.
• "sfocatura": Il terzo valore è una sfocatura. Massimizzare il suo valore massimizzerà l'effetto sfocatura.
• "diffusione": Il quarto valore rappresenta lo spread ombra. Può contenere valori positivi o negativi, in cui il valore positivo aumenta lo spread e un valore negativo lo diminuisce.
• "colore": Questo valore è facoltativo, che rappresenta il colore corrente.
• "iniziale": Questo valore imposta la proprietà del suo valore iniziale.
• "ereditare": Questo valore eredita la proprietà del suo elemento genitore.
• "inserto": Il valore dell'inserto viene utilizzato per realizzare ombre all'interno della casella.

Vediamo come l'effetto ombra appare attraverso un esempio pratico.

Esempio

Nel file HTML, prima, aggiungi un "". All'interno di questo elemento, aggiungi

E

Tag per fornire contenuti alla pagina Web.

Html

L'ombra della scatola

Box-Shadow: 3px 8px

Ora, applica le proprietà CSS agli elementi HTML aggiunti.

CSS

div
Box-Shadow: 3px 8px;

L'elemento Div viene applicato con la proprietà "Box-Shadow"Con il valore"3px 8px", Che rappresenta l'offset orizzontale e l'offset verticale.

Produzione

Nella sezione successiva, gli elementi HTML saranno disegnati con proprietà diverse.

CSS

div
Bordo: 5px Solid RGB (255, 111, 1);
Box-Shadow: 3px 8px 9px 4px #f4af1b;

Di seguito sono riportate le proprietà CSS aggiuntive applicate all'elemento Div:

• "confine"Alla proprietà viene assegnato il valore 5px solido RGB (255, 111,1) dove 5px indica la larghezza del bordo, Solid rappresenta lo stile del bordo e RGB (255, 111, 1) è il colore.
• "Box-Shadow"Proprietà con il valore 3px 8px 9px 4px #f4af1b Rappresenta H-offset come 3px, v-offset come 8px, sfuggire come 9px, diffuso come 4px e #f4af1b specifica il colore.

Il codice sopra dato visualizzerà l'elemento Div come mostrato di seguito:

Ora, nella sezione successiva, crea due caselle che rappresentano due elementi Div. Daremo a ciascuno a ciascuno con diversi valori di Shadow a scatole multipli e osserveremo i risultati.

Html

L'ombra della scatola

Box-Shadow: 3px 8px 9px 4px #f4af1b

L'ombra della scatola

Box-Shadow: 3px 8px 9px 4px #f4af1b

Style Box1 Div

#box1
larghezza: 40%;
Altezza: 140px;
Bordo: 5px Solid #FF9C83;
Box-Shadow: 8px 10px 15px 20px #807f7f;

Qui:

• "#box1"Viene utilizzato per accedere al div con ID box1.
• "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento.
• "altezza"La proprietà imposta l'altezza dell'elemento.
• "confine"Viene dato valore 5px solido #ff9c83 dove 5px indica la larghezza del bordo, solido rappresenta lo stile del bordo e #ff9c83 è il colore.
• "Box-ShadowLa proprietà "sarà impostata come"8px 10px 15px 20px #807f7f"Dove 8px è offset orizzontale, 10px è offset verticale, 15px è l'effetto sfocatura, 20px è un effetto di diffusione e #807f7f è il colore dell'ombra.

Style Box2 Div

#box2
larghezza: 40%;
Altezza: 140px;
Bordo: 5px Solid RGB (255, 111, 1);
Box-Shadow: inserto 4px 8px #f4af1b;
margine-sinistra: 350px;

Si può osservare che abbiamo disegnato il box2 div con le stesse proprietà:

Suggerimento bonus: aggiunta di più ombre sull'elemento HTML

IL "Box-Shadow"La proprietà può essere utilizzata per aggiungere più effetti ombra a un elemento HTML. Questo può essere fatto usando virgole tra ogni ombra come mostrato nell'esempio seguente:

Box-Shadow: 6px 6px RGB (91, 0, 143), 12px 5px RGB (201, 8, 8), 16px 16px 8px RGB (226, 213, 29);

Come puoi vedere, più ombre sono state applicate con successo:

Questo era tutto per l'uso dell'ombra di frontiera CSS.

Conclusione

IL "Box-Shadow"La proprietà in CSS viene utilizzata per applicare gli effetti ombra agli elementi HTML. Questa proprietà è costituita principalmente da due valori che sono per offset orizzontale e offset verticali, ma possono esserci più valori come per l'effetto sfocato, l'effetto del raggio di diffusione, il colore e altro ancora. Inoltre, puoi anche aggiungere più ombre agli elementi utilizzando virgole tra ogni proprietà box-shadow. Questo articolo ha spiegato la proprietà CSS Box-Shadow con esempi pratici.