Articles
Introductie tot CSS
CSS-eigenschappen gerelateerd aan gebruikersinterface

CSS-eigenschappen gerelateerd aan gebruikersinterface

Dit artikel legt CSS-eigenschappen uit die gerelateerd zijn aan de gebruikersinterface.

Je kunt leren over de eigenschappen content, cursor, pointer-events en resize, inclusief hun toepassingen en hoe je ze kunt schrijven.

YouTube Video

HTML voor Voorbeeldweergave

css-ui.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-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</html>

Gerelateerd aan gebruikersinterface

content-eigenschap 

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

De content-eigenschap wordt gebruikt om inhoud toe te voegen aan pseudo-elementen, voornamelijk ::before of ::after. Deze eigenschap wordt gebruikt om tekst, afbeeldingen, tellers, enz. te definiëren, die niet direct binnen het element worden weergegeven. De belangrijkste rol is om decoratieve inhoud of aanvullende informatie te beheren die niet direct in HTML is geschreven via stijlen.

In dit voorbeeld wordt "Opmerking: " toegevoegd vóór het element en "(Einde)" erna toegevoegd. Deze maken respectievelijk gebruik van de pseudo-elementen ::before en ::after.

Waarden van de content-eigenschap 

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

De content-eigenschap kan de volgende waarden aannemen:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}
  • Tekst
    • Je kunt tekst toevoegen door een tekenreeks direct tussen dubbele aanhalingstekens ("") te plaatsen.
1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}
  • Afbeelding
    • Je kunt een afbeelding invoegen met de functie url().
 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}
  • Teller
    • Gebruik de functie counter() om een teller weer te geven.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Attribuut
    • De functie attr() kan worden gebruikt om de attribuutwaarde van een HTML-element weer te geven. Je kunt bijvoorbeeld het title-attribuut weergeven.
1/* None */
2.content-none::before {
3    content: none;
4}
  • geen
    • Geeft aan dat er geen inhoud moet worden weergegeven. Dit is de standaardinstelling.

Gebruiksnotities

Houd rekening met de volgende punten bij het gebruik van de eigenschap content:.

  • De content-eigenschap is alleen van toepassing op pseudo-elementen, niet op gewone elementen.
  • Aangezien het niet wordt toegevoegd aan de DOM, kan het niet direct met JavaScript worden gemanipuleerd.
  • Het kan de lay-out beïnvloeden en wordt daarom vaak gebruikt voor het weergeven van decoratieve of aanvullende informatie.

cursor-eigenschap

De cursor-eigenschap wordt gebruikt om het type cursor te specificeren dat wordt weergegeven wanneer de muispointer boven een element wordt geplaatst. Je kunt verschillende cursorstijlen specificeren en het wordt vaak toegepast op interactieve elementen om de gebruikerservaring te verbeteren.

Belangrijkste cursortypen

De volgende waarden kunnen worden gespecificeerd als cursortypen:.

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }
default
  • default is de normale pijlcursor (de standaardcursor van de browser).
pointer
  • pointer is een handvormige cursor die wordt weergegeven wanneer deze boven een link is geplaatst.
text
  • text is een I-balkcursor die wordt weergegeven in gebieden waar tekst kan worden geselecteerd.
move 
- `move` is een kruisvormige cursor die wordt gebruikt wanneer een element kan worden versleept.
crosshair
  • crosshair is een crosshair-cursor voor precieze selectie.
not-allowed
  • not-allowed is een cursor voor gebieden of acties die niet zijn toegestaan.
help
  • help is een cursor met een vraagteken die wordt weergegeven boven elementen die hulpinformatie kunnen bieden.
wait
  • wait is een zandloper- of cirkelvormige cursor die een verwerkingsstatus aangeeft.
progress
  • progress is een cursor die een lopende operatie aangeeft. Echter, het geeft aan dat de gebruiker andere handelingen kan uitvoeren.
grab
  • grab is een cursor voor het vastpakken van sleepbare elementen.
grabbing
  • grabbing is een cursor die aangeeft dat een element wordt versleept.
resize

resize is een cursor die wordt gebruikt wanneer een venster of element kan worden vergroot of verkleind. Er zijn verschillende typen afhankelijk van de richting.

  • n-resize: Een formaatwijzigingscursor die omhoog wijst.

  • s-resize: Een formaatwijzigingscursor die omlaag wijst.

  • e-resize: Een formaatwijzigingscursor die naar rechts wijst.

  • w-resize: Een formaatwijzigingscursor die naar links wijst.

  • ne-resize: Een formaatwijzigingscursor die naar rechtsboven wijst.

  • nw-resize: Een formaatwijzigingscursor die naar linksboven wijst.

  • se-resize: Een formaatwijzigingscursor die naar rechtsonder wijst.

  • sw-resize: Een formaatwijzigingscursor die naar linksonder wijst.

Aangepaste cursor 

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

Het is ook mogelijk om een aangepaste cursor in te stellen met behulp van url().

  • In dit voorbeeld is custom-cursor.png het afbeeldingsbestand voor de cursor. Als dat afbeeldingsbestand niet beschikbaar is, wordt de standaardcursor van de browser weergegeven met auto.

Samenvatting

  • De eigenschap cursor geeft aan welke cursor moet worden weergegeven wanneer de gebruiker zich boven een element bevindt.
  • Er zijn verschillende cursorstijlen beschikbaar afhankelijk van het gebruik, en er kunnen ook aangepaste cursors worden ingesteld.
  • Door geschikte cursorstijlen te selecteren op basis van interactieve elementen en beperkte handelingen, kan een gebruiksvriendelijkere UI worden geboden.

Eigenschap pointer-events 

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

De eigenschap pointer-events wordt gebruikt om te bepalen hoe een element omgaat met gebeurtenissen van aanwijzingstoestellen zoals muis, aanraking en stylus. Normaal gesproken ontvangt een element aanwijzingsgebeurtenissen wanneer een gebruiker erop klikt of het aanwijst, maar dit gedrag kan worden aangepast met behulp van deze eigenschap.

  • In de pointer-events-auto klasse is de eigenschap pointer-events ingesteld op auto, waardoor normale klik- en hovergebeurtenissen kunnen worden verwerkt. Het element is aanklikbaar, dus wordt er een bericht weergegeven wanneer erop wordt geklikt.

  • In de pointer-events-auto klasse is de eigenschap pointer-events ingesteld op none, waardoor het element geen aanwijzingsgebeurtenissen ontvangt. Zelfs als de eigenschap cursor is ingesteld op pointer, verandert de muiscursor niet en worden de onderliggende elementen aanklikbaar.

Waarde types

  • De eigenschap pointer-events geeft aan of en hoe een element aanwijzingsgebeurtenissen ontvangt. Je kunt de volgende waarden specificeren.
auto
  • auto is de standaardwaarde, waarbij het element normaal gesproken pointer-gebeurtenissen ontvangt.
none
  • Wanneer none is opgegeven, ontvangt het element geen pointer-gebeurtenissen. Het element schakelt interacties zoals klikken en zweven uit, maar andere elementen eronder kunnen wel pointer-gebeurtenissen ontvangen.
visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit 
1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;
  • Deze waarden worden voornamelijk gebruikt voor SVG-elementen. Elke waarde bepaalt of specifieke delen van een element (zoals vulling, lijn, enz.) reageren op pointer-gebeurtenissen. Het wordt meestal niet gebruikt met reguliere HTML-elementen.

Belangrijke punten voor gebruik

Hier zijn enkele voorbeelden van hoe de eigenschap pointer-events te gebruiken.

  1. Het selecteren van elementen die je wilt uitschakelen

    • De none-waarde is handig om tijdelijk elementen zoals knoppen of links uit te schakelen.

  2. Gebruik met over elkaar geplaatste elementen

    • Wanneer de eigenschap position is ingesteld op absolute of elementen zijn gelaagd met behulp van de eigenschap z-index, zal het instellen van pointer-events op none voor het bovenste element pointer-gebeurtenissen naar het element eronder toestaan.

Eigenschap resize 

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

De eigenschap resize is een CSS-eigenschap die bepaalt in welke richting een element door de gebruiker kan worden aangepast. Met deze eigenschap kun je toestaan dat elementen verticaal of horizontaal worden aangepast door te slepen, of het aanpassen volledig uitschakelen.

Waarde types

  • De eigenschap "resize" specificeert de richtingen waarin een element kan worden verkleind. Je kunt de volgende waarden specificeren.
both
  • Wanneer both wordt gespecificeerd, kan het element zowel verticaal als horizontaal worden aangepast.
horizontal
  • Wanneer horizontal wordt gespecificeerd, kan het element alleen horizontaal worden aangepast (breedte).
vertical
  • Wanneer vertical wordt gespecificeerd, kan het element alleen verticaal worden aangepast (hoogte).
none
  • Wanneer none wordt gespecificeerd, wordt het aanpassen van het element uitgeschakeld. Dit is de standaardwaarde.
inherit
  • Door inherit op te geven, erft het element de waarde van de eigenschap resize van zijn ouder.

Notities

  • Om een element aanpasbaar in grootte te maken, moet je zowel de eigenschap overflow als de eigenschap resize instellen. Grootte-aanpasbare elementen kunnen scrollbars nodig hebben, en meestal wordt overflow: auto ingesteld.
  • Het aanpassen van de grootte wordt over het algemeen gebruikt bij block-elementen zoals div en textarea.

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

YouTube Video

CSS-eigenschappen met betrekking tot 3D-animatie