Articles
Introductie tot CSS
CSS-eigenschappen met betrekking tot de decoratie van het boxmodel

CSS-eigenschappen met betrekking tot de decoratie van het boxmodel

Dit artikel legt de CSS-eigenschappen uit die betrekking hebben op de decoratie van het boxmodel.

Je kunt leren hoe je eigenschappen zoals randen en schaduwen schrijft.

YouTube Video

HTML voor Voorbeeldweergave

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Decoratie

border-eigenschap 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

De border-eigenschap wordt in CSS gebruikt om het frame van een element in te stellen. border bestaat uit drie elementen: breedte, stijl en kleur, en deze worden gecombineerd om het frame van het element in te stellen.

Basisstructuur van border 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • Gebruik border-width om de dikte van de rand te specificeren. Eenheden worden gespecificeerd in px, em, %, enz.

  • Specificeer het type rand met border-style. Je kunt de volgende waarden specificeren.

    • Stijlwaarden:
      • none (geen rand)
      • solid (ononderbroken lijn)
      • dotted (Gestippelde lijn)
      • dashed (Streepjeslijn)
      • double (Dubbele lijn)
      • groove (gegroefde lijn)
      • ridge (geribbelde lijn)
      • inset (ingedrukte schaduwlijn)
      • outset (uitstekende schaduwlijn)

Specificeer de kleur van de rand met border-color. Kleur kan worden gespecificeerd met kleurnamen, rgb(), rgba(), hex, enz.

Individuele instellingen voor elke zijde 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

U kunt ook verschillende stijlen voor elke zijde instellen zoals dit.

Individuele instellingen voor breedte, stijl en kleur 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

U kunt elk aspect ook afzonderlijk specificeren met border-width, border-style en border-color.

Combineren met border-radius 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Met de eigenschap border-radius kunt u de hoeken van de rand afronden.

border-radius-eigenschap 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

De eigenschap border-radius wordt gebruikt om de hoeken van een element af te ronden. U kunt de vier hoeken van een HTML-element soepel afronden, waardoor rechthoeken of vierkanten een afgerond ontwerp krijgen.

Uitleg:

  • Met de klasse border-radius-all-rounded worden alle hoeken afgerond met 20 pixels, wat resulteert in een soepel afgeronde doos.
  • Met de klasse border-radius-top-left-rounded wordt alleen de linkerbovenhoek afgerond met 20 pixels, terwijl de andere hoeken vierkant blijven.
  • De klasse border-radius-ellipse-corners maakt elliptische hoeken, wat resulteert in een doos met een horizontaal uitgerekte afgeronde vorm.

Het formaat van de eigenschap border-radius 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • De waarde van de eigenschap border-radius wordt meestal opgegeven in pixels of procenten. U kunt ook 1 tot 4 waarden instellen.
    • Het opgeven van één waarde maakt alle hoeken gelijkmatig rond.
    • Bij het opgeven van twee waarden wordt de eerste waarde toegepast op de linkerbovenhoek en rechterbenedenhoek, en de tweede waarde op de rechterbovenhoek en linkerbenedenhoek.
    • Door vier waarden op te geven, kunt u verschillende radii voor elke hoek instellen. De waarden worden met de klok mee toegepast vanaf de linkerbovenhoek.
  • U kunt ook individueel specificeren, zoals border-top-left-radius.
1border-radius: 50px / 25px;
  • De eigenschap border-radius kan ook verticale en horizontale radii afzonderlijk specificeren om de hoeken elliptisch te maken. In dit geval scheidt u met /.
    • Bijvoorbeeld, door 50px / 25px op te geven, wordt de horizontale straal 50 pixels en de verticale straal 25 pixels.

Samenvatting

  • border-radius is een eigenschap om de hoeken van een element af te ronden.
  • U kunt de afronding van de hoeken specificeren in pixels of procenten, toepassen op alle hoeken, specifieke hoeken, of ze elliptisch maken.
  • Het is nuttig voor flexibele ontwerpen en het aanpassen van gebruikersinterfaces.

outline-eigenschap 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

De outline-eigenschap is een CSS-eigenschap om de lijn in te stellen die om een element wordt getekend.

outline lijkt op border, maar verschilt op de volgende punten:.

  • outline beïnvloedt het boxmodel van het element niet, dus het heeft geen invloed op de lay-out van het element.
  • Aangezien outline buiten het element wordt getekend, verschijnt het buiten de border.
  • De border wordt binnen het element getekend, dus het kan de grootte en lay-out van het element beïnvloeden.

In dit voorbeeld is de outline-eigenschap als volgt ingesteld:.

  • De outline-solid-klasse stelt een 2px dikke, solide rode outline in.
  • De outline-dashed-klasse stelt een 3px blauwe, gestreepte outline in.
  • De outline-double-klasse stelt een 4px dikke, groene dubbelzijdige outline in.
  • De outline-offset-klasse stelt een ruimte van 10px in tussen de outline en het element.

Basis Syntax 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width specificeert de dikte van de outline.
  • Je kunt specifieke waarden opgeven zoals thin, medium, thick, of in eenheden zoals px, em.
outline-style
  • outline-style specificeert de stijl van de outline.
  • Je kunt stijlen opgeven zoals solid, dotted, dashed, double, groove, ridge, inset, outset, none, enz.
outline-color
  • outline-color specificeert de kleur van de outline.
  • Je kunt elke gewenste kleur opgeven met behulp van namen, HEX, RGB, enz.
outline-offset
  • outline-offset specificeert de afstand tussen de outline en het element.
  • Je kunt exacte waarden opgeven in eenheden zoals px, em, enz.

box-shadow-eigenschap 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

De box-shadow-eigenschap wordt gebruikt om schaduwen toe te voegen aan elementen. Met behulp van deze eigenschap kun je schaduwen rond elementen creëren om een gevoel van dimensionaliteit en diepte uit te drukken.

Uitleg:

  • In de box-shadow-basic-shadow klasse wordt een vervaagde zwarte schaduw weergegeven rechtsonder het element.

  • In de box-shadow-inset-shadow klasse wordt een vervaagde schaduw weergegeven binnenin het element. Met de schaduw naar binnen kunt u een verzonken ontwerp creëren.

  • In de box-shadow-multiple-shadow klasse worden twee schaduwen, zwart en rood, toegepast op het element. Omdat ze op verschillende posities worden weergegeven, wordt een driedimensionaal effect bereikt.

Formaat van de box-shadow-eigenschap 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
Betekenis van elke waarde

De eerste horizontale offset is de waarde van de horizontale verschuiving, die de positie van de schaduw vanaf de linkerzijde van het element aangeeft. Een positieve waarde plaatst de schaduw naar rechts, en een negatieve waarde plaatst deze naar links.

De tweede verticale offset is de waarde van de verticale verschuiving, die de positie van de schaduw vanaf de bovenzijde van het element aangeeft. Een positieve waarde plaatst de schaduw onder het element, en een negatieve waarde plaatst deze erboven.

De derde vervagingsradius is de waarde voor de hoeveelheid vervaging, die de wazigheid van de schaduw aangeeft. Hoe groter de waarde, hoe meer de schaduw verspreidt, resulterend in een meer vervaagde schaduw. Een positieve waarde plaatst de schaduw onder het element, en een negatieve waarde plaatst deze erboven. Dit is optioneel, en de standaardwaarde is 0, wat betekent dat er geen vervaging op de schaduw is.

De vierde spreadradius is de waarde voor de spreidingsrange, die aangeeft hoe veel de schaduw zich uitstrekt. Een positieve waarde zorgt ervoor dat de schaduw groter wordt, terwijl een negatieve waarde deze kleiner maakt. Deze waarde is ook optioneel.

De vijfde kleur is de kleurwaarde, die de kleur van de schaduw aangeeft. Kleuren kunnen worden ingesteld met behulp van kleurnamen, RGB, HEX, HSL en andere kleurmodellen die beschikbaar zijn in CSS. Als deze wordt weggelaten, wordt de standaard tekstkleur van het element (waarde van de kleur-eigenschap) toegepast.

U kunt ook eerst het sleutelwoord inset specificeren. Bij het specificeren van het sleutelwoord inset wordt de schaduw binnenin het element getekend in plaats van buiten het element. Het is ook mogelijk om meerdere schaduwen in te stellen, gescheiden door komma's.

Voorbeeld van box-shadow

Voorbeeld van een basis schaduw 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • De horizontale offset is 10px, wat resulteert in een schaduw 10 pixels naar rechts.
  • De verticale offset is 10px, wat resulteert in een schaduw 10 pixels naar beneden.
  • De vervaging radius is 5px, wat resulteert in een schaduw met een vervaging van 5 pixels.
  • De kleur is rgba(0, 0, 0, 0.5), wat resulteert in een semi-transparante zwarte kleur.
Voorbeeld van een binnenschaduw 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • Door inset te gebruiken wordt de schaduw binnen het element getekend.
Voorbeeld van meerdere schaduwen 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • Je kunt ook meerdere schaduwen instellen, gescheiden door komma's. In dit voorbeeld worden twee schaduwen toegepast: een zwarte schaduw en een rode schaduw.

Samenvatting

  • box-shadow is een eigenschap die wordt gebruikt om schaduwen toe te voegen aan elementen om diepte te creëren.
  • Door horizontale en verticale offsets, vervaging, verspreidingsradius en kleur te combineren, kunnen verschillende effecten worden bereikt.
  • Je kunt schaduwen binnenin tekenen met inset, en je kunt ook meerdere schaduwen tegelijk instellen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Achtergrondgerelateerde CSS-eigenschappenLijstgerelateerde CSS-eigenschappen