Hoe CSS box-shadow te gebruiken: 13 trucs en voorbeelden

CSS is de taal die ontwikkelaars gebruiken om een ​​webpagina op te maken. Het bepaalt hoe HTML-elementen worden weergegeven op een scherm, op papier of in een andere vorm van media. CSS biedt de volledige aanpassingskracht om de webpagina in uw eigen afbeelding te stylen.

U kunt de achtergrondkleur, lettertypestijl, lettertypekleur, box-shadow, marge en tal van andere eigenschappen van een element wijzigen met behulp van CSS. We zullen u in deze handleiding door enkele effectieve toepassingen van box-shadow leiden.

Wat is CSS box-shadow?

De doos-schaduw eigenschap wordt gebruikt om een ​​schaduw toe te passen op HTML-elementen. Het is een van de meest gebruikte CSS-eigenschappen voor het stylen van kaders of afbeeldingen.

CSS-syntaxis:

box-shadow: [horizontale offset] [verticale offset] [vervagingsradius] [optionele spreidingsradius] [kleur];

1. horizontale offset: Als de horizontale offset positief is, bevindt de schaduw zich rechts van het vak. En als de horizontale offset negatief is, bevindt de schaduw zich links van het vak.
instagram viewer
2. verticale offset: Als de verticale offset positief is, bevindt de schaduw zich onder de doos. En als de verticale offset negatief is, bevindt de schaduw zich boven de doos.
3. vervagingsradius: Hoe hoger de waarde, hoe waziger de schaduw zal zijn.
4. spreidingsradius: Het geeft aan hoeveel de schaduw zich moet verspreiden. Positieve waarden vergroten de spreiding van de schaduw, negatieve waarden verkleinen de spreiding.
5. Kleur: Het duidt de kleur van de schaduw aan. Het ondersteunt ook elk kleurformaat zoals rgba, hex of hsla.

De parameters voor vervaging, spreiding en kleur zijn optioneel. Het meest interessante deel van box-shadow is dat je een komma kunt gebruiken om zo vaak mogelijk box-shadow-waarden te scheiden. Dit kan worden gebruikt om meerdere randen en schaduwen op de elementen te creëren.

1. Voeg een Dim box-schaduw toe aan de linker-, rechter- en onderkant van de box

U kunt zeer vage schaduwen toevoegen aan drie zijden (links, rechts en onderaan) van de box met behulp van de volgende box-shadow CSS met uw doel-HTML-element:

doosschaduw: rgba (149, 157, 165, 0.2) 0px 8px 24px;

Uitgang:

2. Voeg een Dim Box-schaduw toe aan All Sides

U kunt lichte schaduwen aan alle zijden van de box toevoegen met behulp van de volgende box-shadow CSS met uw doel-HTML-element:

doosschaduw: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

Uitgang:

3. Voeg een dunne doosschaduw toe aan de onderkant en rechterkant

U kunt schaduwen aan de onderkant en rechterkant van het vak toevoegen met behulp van de volgende vakschaduw-CSS met uw doel-HTML-element:

doosschaduw: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Uitgang:

4. Voeg een donkere doosschaduw toe aan alle zijden

U kunt donkere schaduw aan alle zijden van de box toevoegen met de volgende box-shadow CSS met uw doel-HTML-element:

doosschaduw: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Uitgang:

5. Voeg een spreidende schaduw toe aan alle zijden

U kunt aan alle zijden van het kader een spreidingsschaduw toevoegen met behulp van de volgende opdracht met uw doel-HTML-element:

box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

Uitgang:

6. Voeg een dunne randschaduw toe aan alle zijden

U kunt een eenvoudige randschaduw aan alle zijden van het kader toevoegen met behulp van de volgende CSS met uw doel-HTML-element:

doosschaduw: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px inzet;

Uitgang:

7. Voeg een doosschaduw toe aan de onderkant en linkerkant

U kunt een schaduw toevoegen aan de onder- en linkerkant van de box met behulp van de volgende box-shadow CSS met uw doel-HTML-element:

doosschaduw: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Uitgang:

8. Voeg een Dim box-schaduw toe aan de boven- en linkerkant, donkere schaduw aan de onderkant en rechterkant

U kunt een lichte schaduw aan de boven- en linkerkant van de box toevoegen, evenals een donkere schaduw aan de onderkant en rechterkant van de box met behulp van de volgende CSS met uw doel-HTML-element:

doosschaduw: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Uitgang:

9. Voeg een dunne, gekleurde randschaduw toe aan alle zijden

U kunt een eenvoudige gekleurde randschaduw aan alle zijden van de box toevoegen met behulp van de volgende box-shadow CSS met uw doel-HTML-element:

doosschaduw: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Uitgang:

10. Voeg meerdere gekleurde randschaduwen toe aan de onder- en linkerzijde van de doos

U kunt meerdere gekleurde randschaduwen aan de onder- en linkerkant van het vak toevoegen met behulp van de volgende CSS met uw doel-HTML-element:

box-shadow: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px inzet, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px inzet;

Uitgang:

11. Voeg meerdere gekleurde randschaduwen toe aan de onderkant

U kunt meerdere gekleurde randschaduwen aan de onderkant van het vak toevoegen met behulp van de volgende vakschaduw-CSS met uw doel-HTML-element:

doosschaduw: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0.1) 0px 20px, rgba (240, 46, 170, 0.05) 0px 25px;

Uitgang:

12. Voeg meerdere gekleurde randschaduwen toe aan de onderkant en rechterkant van de doos

U kunt meerdere gekleurde randschaduwen aan de onderkant en rechterkant van het vak toevoegen met behulp van de volgende CSS met uw doel-HTML-element:

doosschaduw: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170 0,1) 20 px 20 px, rgba (240, 46, 170, 0,05) 25 px 25 px;

Uitgang:

13. Voeg lichte schaduwen toe aan de linker- en rechterkant, spreid schaduw naar beneden

U kunt lichte schaduwen aan de linker- en rechterkant toevoegen en schaduw verspreiden naar de onderkant van het vak met behulp van de volgende box-shadow CSS met uw doel-HTML-element:

box-shadow: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0,09) 0px 32px 16px;

Uitgang:

Integreer CSS met een HTML-pagina

Nu je weet hoe je coole box-shadow-effecten kunt toevoegen met CSS, kun je ze eenvoudig op verschillende manieren met HTML-elementen integreren.

Verwant: 11 Handige tools om CSS-bestanden te controleren, op te schonen en te optimaliseren

U kunt het insluiten in de HTML-pagina zelf of het als een afzonderlijk document bijvoegen. Er zijn drie manieren om CSS in een HTML-document op te nemen:

Interne CSS

Embedded of Internal Style Sheets worden ingevoegd in het sectie van een HTML-document met de element. U kunt een willekeurig aantal elementen in een HTML-document, maar ze moeten tussen de en tags. Hier is een voorbeeld dat laat zien hoe u interne CSS kunt gebruiken met een HTML-document:

Stijl 4

Inline CSS

Inline CSS wordt gebruikt om unieke stijlregels toe te voegen aan een HTML-element. Het kan worden gebruikt met een HTML-element via de stijl attribuut. Het style-attribuut bevat CSS-eigenschappen in de vorm van "eigendoms-waarde" gescheiden door een puntkomma (;).

Verwant: Leer hoe u tweedimensionale websites kunt bouwen met CSS Grid

Alle CSS-eigenschappen moeten op één regel staan, d.w.z. er mogen geen regeleinden zijn tussen de CSS-eigenschappen. Hier is een voorbeeld dat laat zien hoe u inline CSS met een HTML-document kunt gebruiken:

Stijl 4

Externe CSS

Externe CSS is de meest ideale manier om stijlen op HTML-documenten toe te passen. Een externe stijlpagina bevat alle stijlregels in een apart document (.css-bestand), dit document wordt vervolgens aan het HTML-document gekoppeld met behulp van de label. Deze methode is de beste methode voor het definiëren en toepassen van stijlen op de HTML-documenten, aangezien het betreffende HTML-bestand minimale wijzigingen in de opmaak vereist. Hier is een voorbeeld dat laat zien hoe u externe CSS met een HTML-document kunt gebruiken:

Maak een nieuw CSS-bestand met de .css uitbreiding. Voeg nu de volgende CSS-code toe aan dat bestand:

.kop {
text-align: center;
}
.image-box {
display: blok;
marge-links: auto;
margin-right: auto;
doosschaduw: rgba (0, 0, 0, 0.35) 0px 5px 15px;
}

Maak ten slotte een HTML-document en voeg de volgende code toe aan dat document:

Stijl 4

Merk op dat het CSS-bestand is gekoppeld aan het HTML-document via tag en href attribuut.

Alle bovenstaande drie methoden (interne CSS, Inline CSS en externe CSS) geven dezelfde uitvoer weer:

Maak uw webpagina elegant met CSS

Door CSS te gebruiken, heeft u volledige controle over de opmaak van uw webpagina. U kunt elk HTML-element aanpassen met verschillende CSS-eigenschappen. Ontwikkelaars van over de hele wereld dragen bij aan CSS-updates, en dat doen ze al sinds de release in 1996. Daarom hebben beginners veel te leren!

Gelukkig is CSS beginnersvriendelijk. U kunt uitstekend oefenen door met een paar eenvoudige opdrachten te beginnen en te kijken waar uw creativiteit u heen brengt.

10 eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren

Meer weten over het gebruik van CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen en pas ze vervolgens toe op uw eigen webpagina's.

Lees Volgende

Over de auteur