Questo blog discuterà il metodo per applicare gli effetti ombra agli elementi HTML.
Come eliminare l'effetto ombra sugli elementi HTML usando i CSS?
Il ' scatola-ombra La proprietà ” aggiunge un'ombreggiatura attorno a un elemento in cui due o più valori dell'effetto aggiunto possono essere separati da virgole.
La sintassi della proprietà box-shadow è descritta di seguito.
Sintassi
scatola-ombra : nessuno |offset orizzontale offset verticale sfocatura diffusione colore | inserto | iniziale | erediti ;
Di seguito si riporta la descrizione della suddetta sintassi:
- “ nessuno ”: è il valore predefinito della proprietà box-shadow.
- “ offset h ”: Questo valore rappresenta la distanza orizzontale.
- “ offset v ”: Questo valore definisce la distanza verticale.
- “ sfocatura ”: Il terzo valore è una sfocatura. Massimizzarne il valore massimizzerà l'effetto di sfocatura.
- “ propagazione ”: Il quarto valore rappresenta l'estensione dell'ombra. Può contenere valori positivi o negativi, dove il valore positivo aumenta lo spread e un valore negativo lo diminuisce.
- “ colore ”: questo valore è facoltativo e rappresenta il colore corrente.
- “ iniziale ”: Questo valore imposta la proprietà del suo valore iniziale.
- “ erediti ”: questo valore eredita la proprietà del suo elemento padre.
- “ inserto ”: Il valore dell'inset viene utilizzato per creare ombre all'interno della scatola.
Vediamo come appare l'effetto ombra attraverso un esempio pratico.
Esempio
Nel file HTML, per prima cosa, aggiungi un ' per fornire contenuto alla pagina web. Ora applica le proprietà CSS agli elementi HTML aggiunti. L'elemento div viene applicato con la proprietà ' scatola-ombra ” con il valore “ 3px 8px ”, che rappresenta l'offset orizzontale e verticale. Produzione Nella sezione successiva, gli elementi HTML saranno stilizzati con proprietà diverse. Di seguito sono riportate le proprietà CSS aggiuntive applicate all'elemento div: Il codice sopra indicato visualizzerà l'elemento div come mostrato di seguito: Ora, nella sezione successiva, crea due riquadri che rappresentano due elementi div. Daremo a ciascuno diversi valori multipli di box-shadow e osserveremo i risultati. Qui: Si può osservare che abbiamo stilizzato il box2 div con le stesse proprietà: Il ' scatola-ombra La proprietà ” può essere utilizzata per aggiungere più effetti ombra a un elemento HTML. Questo può essere fatto usando le virgole tra ogni ombra come mostrato nell'esempio seguente: Come puoi vedere, più ombre sono state applicate con successo: Riguardava l'uso dell'ombreggiatura del bordo CSS. Il ' scatola-ombra La proprietà ” in CSS viene utilizzata per applicare effetti ombra agli elementi HTML. Questa proprietà consiste principalmente di due valori che sono per l'offset orizzontale e verticale, ma possono esserci più valori come effetto sfocatura, effetto raggio di diffusione, colore e altro. Inoltre, puoi anche aggiungere più ombre agli elementi usando le virgole tra ogni proprietà box-shadow. Questo articolo ha spiegato la proprietà CSS box-shadow con esempi pratici. e
HTML
< div >
< h1 > L'ombra della scatola < / h1 >
< p > scatola-ombra: 3px 8px < / p >
< / div >
CSS
div {
scatola-ombra : 3px 8px ;
}
CSS
div {
frontiera : 5px solido rgb ( 255 , 111 , 1 ) ;
scatola-ombra : 3px 8px 9 pixel 4px #f4af1b ;
}
HTML
>
>
Style box1 div
#scatola1 {
larghezza : 40% ;
altezza : 140 pixel ;
frontiera : 5px solido #ff9c83 ;
scatola-ombra : 8px 10px 15px 20px #807f7f ;
}
Style box2 div
#scatola2 {
larghezza : 40% ;
altezza : 140 pixel ;
frontiera : 5px solido rgb ( 255 , 111 , 1 ) ;
scatola-ombra : inserto 4px 8px #f4af1b ;
margine sinistro : 350 pixel ;
}
Suggerimento bonus: aggiunta di più ombre sull'elemento HTML
Conclusione