HTML is de taal die wordt gebruikt om de structuur van webpagina's te bieden, en CSS stelt ons in staat stijlen toe te passen op de elementen. Op een webpagina worden verschillende eigenschapswaarden ingesteld om verschillende stijlen toe te passen, zoals achtergrondkleur, lettergrootte, rand, randradius en kaderschaduw.

Deze blog bespreekt de methode om schaduweffecten toe te passen op HTML-elementen.

Hoe schaduweffect op HTML-elementen te laten vallen met behulp van CSS?

De ' doos-schaduw ” eigenschap voegt een schaduw toe rond een element waar twee of meer toegevoegde effectwaarden kunnen worden gescheiden door komma's.

De syntaxis van de eigenschap box-shadow wordt hieronder beschreven.

Syntaxis

doos-schaduw : geen |h-offset v-offset vervaging verspreide kleur | inzet | voorletter | je erft ;

De beschrijving van de bovengenoemde syntaxis wordt hieronder weergegeven:

“ geen ”: Dit is de standaardwaarde van de eigenschap box-shadow.
“ h-offset ”: Deze waarde vertegenwoordigt de horizontale afstand.
“ v-offset ”: Deze waarde definieert de verticale afstand.
“ vervagen ”: De derde waarde is een waas. Door de waarde te maximaliseren, wordt het vervagingseffect gemaximaliseerd.
“ spreiding ”: De vierde waarde vertegenwoordigt de schaduwspreiding. Het kan positieve of negatieve waarden bevatten, waarbij de positieve waarde de spreiding vergroot en een negatieve waarde deze verlaagt.
“ kleur ”: Deze waarde is optioneel en vertegenwoordigt de huidige kleur.
“ voorletter ”: Deze waarde stelt de eigenschap van de beginwaarde in.
“ je erft ”: Deze waarde erft de eigenschap van het bovenliggende element.
“ inzet ”: De inzetwaarde wordt gebruikt om schaduwen in het vak te maken.

Laten we eens kijken hoe het schaduweffect eruitziet door middel van een praktisch voorbeeld.

Voorbeeld

Voeg in het HTML-bestand eerst een '

”. Voeg binnen dit

-element

- en
-tags toe om inhoud aan de webpagina te geven.

HTML

< div >

< h1 > De Boxschaduw < / h1 >

< p > vakschaduw: 3px 8px < / p >

< / div >

Pas nu de CSS-eigenschappen toe op de toegevoegde HTML-elementen.

CSS

div {

doos-schaduw : 3px 8px ;

}

Het div-element wordt toegepast met de eigenschap ' doos-schaduw ” met de waarde “ 3px 8px ”, die de horizontale offset en verticale offset vertegenwoordigt.

Uitgang

In het volgende gedeelte zullen de HTML-elementen worden opgemaakt met verschillende eigenschappen.

CSS

div {

grens : 5px solide RGB ( 255 , 111 , 1 ) ;

doos-schaduw : 3px 8px 9px 4px #f4af1b ;

}

Hieronder volgen de aanvullende CSS-eigenschappen die zijn toegepast op het div-element:

“ grens ” eigenschap krijgt de waarde 5px solid rgb(255, 111,1) waarbij 5px de breedte van de rand aangeeft, solid de stijl van de rand aangeeft en rgb(255, 111, 1) de kleur is.
“ doos-schaduw ” eigenschap met de waarde 3px 8px 9px 4px #f4af1b vertegenwoordigt de h-offset als 3px, de v-offset als 8px, vervaging als 9px, spreiding als 4px, en #f4af1b specificeert de kleur.

De hierboven gegeven code geeft het div-element weer zoals hieronder weergegeven:

Maak nu in de volgende sectie twee vakken die twee div-elementen vertegenwoordigen. We zullen elk met verschillende meervoudige box-schaduwwaarden geven en de resultaten observeren.

HTML

= 'doos1' >

> De Box-schaduw >

> doos-schaduw : 3px 8px 9px 4px #f4af1b >

> > >

= 'doos2' >

> De Box-schaduw >

> doos-schaduw : 3px 8px 9px 4px #f4af1b >

>

Stijlbox1 div

#doos1 {

breedte : 40% ;

hoogte : 140px ;

grens : 5px solide #ff9c83 ;

doos-schaduw : 8px 10px 15px 20px #807f7f ;

}

Hier:

“ #doos1 ” wordt gebruikt om toegang te krijgen tot de div met id box1.
“ breedte ” eigenschap wordt gebruikt voor het instellen van de breedte van het element.
“ hoogte ” eigenschap stelt de hoogte van het element in.
“ grens ” krijgt de waarde 5px solid #ff9c83 waarbij 5px de breedte van de rand aangeeft, solid de stijl van de rand aangeeft en #ff9c83 de kleur is.
“ doos-schaduw ” eigendom zal worden ingesteld als “ 8px 10px 15px 20px #807f7f ”waarbij 8px de horizontale verschuiving is, 10px de verticale verschuiving, 15px het vervagingseffect, 20px het spreidingseffect en #807f7f de kleur van de schaduw.

Stijlbox2 div

#box2 {

breedte : 40% ;

hoogte : 140px ;

grens : 5px solide RGB ( 255 , 111 , 1 ) ;

doos-schaduw : inzet 4px 8px #f4af1b ;

marge-links : 350px ;

}

Het kan worden waargenomen dat we de box2 div hebben gestileerd met dezelfde eigenschappen:

Bonustip: meerdere schaduwen toevoegen aan HTML-element

De ' doos-schaduw ” eigenschap kan worden gebruikt om meerdere schaduweffecten toe te voegen aan een HTML-element. Dit kan worden gedaan door komma's tussen elke schaduw te gebruiken, zoals in het onderstaande voorbeeld:

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

Zoals u kunt zien, zijn meerdere schaduwen met succes toegepast:

Dat ging allemaal over het gebruik van de CSS-grensschaduw.

Conclusie

De ' doos-schaduw ” eigendom in CSS wordt gebruikt om schaduweffecten toe te passen op HTML-elementen. Deze eigenschap bestaat hoofdzakelijk uit twee waarden die voor horizontale offset en verticale offsets zijn, maar er kunnen meerdere waarden zijn, zoals voor vervagingseffect, spreidingsradiuseffect, kleur en meer. Bovendien kunt u ook meerdere schaduwen aan de elementen toevoegen door komma's te gebruiken tussen elke box-shadow-eigenschap. Dit artikel heeft de CSS box-shadow eigenschap uitgelegd met praktische voorbeelden.

CSS-grensschaduw