De slagschaduw is een effect dat een schaduw laat vallen of een schaduw toevoegt achter de geselecteerde HTML-elementen wanneer deze op de webpagina worden weergegeven. Dit effect kan worden bereikt met behulp van de ' slagschaduw() ' methode als waarde voor CSS ' filter ” eigendom of met behulp van de “ doos-schaduw ' eigendom. Door de eigenschap 'box-shadow' te gebruiken, kunnen de visuele verbetering, gebruikerservaring, nadruk en focus worden getrokken naar een specifiek gericht HTML-element.
Deze handleiding demonstreert de procedure voor het maken van een slagschaduweffect met behulp van de eigenschap box-shadow:
-
- Maak een solide slagschaduw met behulp van box-shadow Property
- Maak een wazige slagschaduw met behulp van box-shadow Property
- Vouw het slagschaduwgebied uit
Hoe maak je slagschaduwen in CSS3 met behulp van de eigenschap box-shadow?
De ' doos-schaduw ” Met de eigenschap kan de ontwikkelaar een visuele hiërarchie tot stand brengen door de relatieve positie van elementen op de pagina aan te geven. Door het te gebruiken, kunnen makers van webpagina's de illusie wekken dat objecten schaduwen op oppervlakken werpen, waardoor elementen een meer interactief gevoel krijgen.
Syntaxis
De eigenschap 'box-shadow' heeft een syntaxis van:
doosschaduw: [ horizontale offset ] [ verticale offset ] [ straal vervagen ] [ verspreide straal ] [ kleur ] ;
Een uitleg van termen die in de bovenstaande syntaxis worden gebruikt:
-
- Aanvankelijk was de “ horizontale offset ” haalt de X-aspositie op of slaat deze op, en de “ negatief ” waarde zet de schaduw naar links en vice versa.
- De ' verticale offset ” waarde slaat de Y-aspositie op, de “ positief ” waarde stelt de schaduw in neerwaartse richting in, en vice versa in het geval van de “ negatief ' waarde.
- Vervolgens de “ straal vervagen ” waarde vanaf de naam stelt de wazigheid van de schaduw in.
- De ' verspreide straal ” waarde geeft aan hoeveel straal de schaduw moet uitbreiden.
- De ' kleur ' stelt de schaduwkleur in, deze kan in de ' HSL ' of ' RGB ”-formaat ook.
Laten we nu een paar voorbeelden doornemen voor een beter begrip:
Voorbeeld 1: effen slagschaduw toepassen met de eigenschap Box Shadow
Voor het instellen van de effen slagschaduw worden alleen de richtingen en schaduwkleur ingevoegd als waarde voor de doos-schaduw ' eigendom:
< stijl >.boxShadowVoorbeeld {
breedte: 210px;
rand: 2px stevige cornsilk;
hoogte: 210px;
Achtergrond kleur: #f0f0f0;
vakschaduw: 10px 10px bosgroen;
}
stijl >
In bovenstaande code:
-
- Eerst wordt het HTML-element geselecteerd met een klasse van ' boxShadowVoorbeeld ”. En de waarde van ' 210px ” wordt verstrekt aan de “ hoogte ' En ' breedte ' eigenschappen. Gebruik ook de ' grens ' En ' Achtergrond kleur ” eigenschappen voor een betere visualisatie.
- Stel vervolgens de waarde in van ' 10px 10px bosgroen ' naar de ' doos-schaduw ” CSS-eigenschap. De ' 10px ” is de horizontale en verticale offset die de locatie bepaalt waar de schaduw moet worden aangebracht. En de ' Bos Groen ” is de kleur van de schaduw.
Na de compilatie ziet de webpagina er als volgt uit:
De uitvoer bevestigt dat er een slagschaduw van het vaste type is geplaatst met behulp van de eigenschap box-shadow.
Voorbeeld 2: Wazige slagschaduw toepassen met de eigenschap Box Shadow
Om de reeds toegepaste schaduw wazig te maken, wordt nog een numerieke waarde ingevoegd vóór de kleur voor de ' doos-schaduw ' eigendom. Bezoek de onderstaande bijgewerkte code:
< stijl >.boxShadowVoorbeeld {
breedte: 210px;
rand: 2px stevige cornsilk;
hoogte: 210px;
achtergrondkleur: witte rook;
vakschaduw: 10px 10px 15px bosgroen;
}
stijl >
Volgens de bovenstaande code is de schaduw nu ' 15px ' vervaagd. Na het einde van de compilatiefase ziet de webpagina er als volgt uit:
De bovenstaande figuur laat zien dat de schaduw nu vervaagd is.
Voorbeeld 3: het slagschaduwgebied uitbreiden
De spreadwaarde wordt verstrekt aan de “ doos-schaduw ” eigenschap voor het uitbreiden van het gebied van de schaduw. De waarde van de spread moet in numeriek formaat zijn. Zoals in het onderstaande codefragment, wordt het schaduwgebied uitgebreid naar ' 20px ”:
< stijl >.boxShadowVoorbeeld {
breedte: 210px;
rand: 2px stevige cornsilk;
hoogte: 210px;
achtergrondkleur: witte rook;
vakschaduw: 10px 10px 15px 20px bosgroen;
}
stijl >
Na de uitvoering ziet de slagschaduw er nu als volgt uit:
Zoals je kunt zien is het gebied van de schaduw nu vergroot met 20px.
Conclusie
De ' doos-schaduw ” eigendom wordt gebruikt voor het creëren van een “ slagschaduw ” effect op geselecteerde HTML-elementen. De ' slagschaduw ' eigenschap accepteert vijf waarden, ' horizontale offset ”, “ verticale offset ”, “ straal vervagen ”, “ verspreide straal ' En ' kleur ”. De waarden voor 'horizontale offset' en 'verticale offset' bepalen de afmetingen voor de schaduw van waaruit de slagschaduw moet verschijnen. De waarde 'vervagingsradius' maakt de schaduw wazig en de waarde 'spreidingsradius' vergroot het gebied van de schaduw.