Articles
Introductie tot CSS
CSS-eigenschappen met betrekking tot filtereffecten

CSS-eigenschappen met betrekking tot filtereffecten

Dit artikel legt de CSS-eigenschappen uit die betrekking hebben op filtereffecten.

Je kunt leren over het gebruik en hoe je eigenschappen zoals filter en transform kunt schrijven.

YouTube Video

HTML voor Voorbeeldweergave

css-effect.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-effect.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>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(100px, 50px, 30px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin-left-top">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Filtereffecten

filter-eigenschap 

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

De filter-eigenschap wordt gebruikt om visuele effecten toe te passen op elementen. Je kunt eenvoudig verschillende effecten toevoegen, zoals het vervagen van afbeeldingen of elementen, het aanpassen van de helderheid en het veranderen van het contrast.

  • De filtered-image-sepia-klasse heeft een sepiakleur-effect toegepast.
  • De filtered-image-opacity-klasse heeft een doorzichtigheidseffect toegepast.
  • De filtered-image-multiple-klasse heeft helderheids-, contrast- en sepiakleur-effecten toegepast op de afbeelding.

Basis Syntax 

1filter: none | <filter-function> [<filter-function>]*;

Voor de filter-eigenschap specificeer je none of een filter-functie.

  • Het specificeren van none past geen filtereffecten toe.
  • Specificeer de filterfunctie die moet worden toegepast in <filter-function>. Meerdere filters kunnen worden gespecificeerd door ze te scheiden met spaties.

Soorten filterfuncties

blur() 
1filter: blur(5px);

De functie blur() past een vervagingseffect toe.

  • De waarde wordt opgegeven in pixels (px) en hoe groter de waarde, des te sterker de mate van vervaging.
brightness() 
1filter: brightness(1.5);

De functie brightness() past de helderheid aan.

  • De waarde wordt opgegeven op basis van 0 (volledig donker) tot 1 (originele helderheid). Het specificeren van een waarde groter dan 1 maakt het element helderder.
contrast() 
1filter: contrast(2);

De functie contrast() past het contrast aan.

  • De waarde wordt opgegeven op basis van 0 (grijstinten) tot 1 (origineel contrast), en waarden groter dan 1 verhogen het contrast.
grayscale() 
1filter: grayscale(1);

De functie grayscale() zet het element om naar monochroom.

  • De waarde wordt gespecificeerd van 0 (originele kleur) tot 1 (volledig monochroom).
hue-rotate() 
1filter: hue-rotate(90deg);

De functie hue-rotate() roteert de tint.

  • Waarden worden aangegeven in graden (deg), waarbij kleurveranderingen worden toegepast door de tint te roteren. De tint roteert in het bereik van 0deg tot 360deg.
invert() 
1filter: invert(1);

De functie invert() keert de kleuren om.

  • Waarden worden gespecificeerd van 0 (originele kleur) tot 1 (volledig omgekeerd).
opacity() 
1filter: opacity(0.5);

De functie opacity() verandert de transparantie van een element.

  • Waarden worden gespecificeerd in het bereik van 0 (volledig transparant) tot 1 (ondoorzichtig).
saturate() 
1filter: saturate(2);

De functie saturate() past de verzadiging aan.

  • Waarden variëren van 0 (monochroom) tot 1 (originele verzadiging), en waarden groter dan 1 verhogen de verzadiging.
sepia() 
1filter: sepia(1);

De functie sepia() zet om naar sepia.

  • Waarden worden gespecificeerd van 0 (originele kleur) tot 1 (volledig sepia).

Meerdere filters toepassen 

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

Meerdere filters kunnen worden toegepast, gescheiden door spaties.

Voordelen van het gebruik van de eigenschap filter

De eigenschap filter is een krachtig hulpmiddel om eenvoudig visueel aantrekkelijke elementen te maken. Het heeft de volgende voordelen:.

  • Visuele effecten kunnen eenvoudig worden toegevoegd.
  • Afbeeldingen kunnen alleen met CSS worden aangepast, zonder beeldbewerkingssoftware.
  • Dynamische effecten kunnen worden gecreëerd door ze te combineren met animaties.

transform-eigenschap 

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

De eigenschap transform wordt gebruikt om 2D- of 3D-transformaties toe te passen op elementen. Verschillende visuele transformaties zoals positie, rotatie, schalen (vergroten/verkleinen) en schuin trekken kunnen worden gespecificeerd met CSS. De eigenschap transform wordt vaak gebruikt in combinatie met animaties en helpt bij het creëren van dynamische UI-elementen.

  • In de transform-scale klasse vergroot het zweven boven het element de breedte met 1,5 keer en de hoogte met 2 keer.

  • In de transform-skew klasse draait het zweven boven het element het met 30 graden op de X-as en 20 graden op de Y-as.

  • In de transform-rotate klasse draait het zweven boven het element het met 45 graden en vergroot het met 1,5 keer.

Basis Syntax 

1transform: none | <transform-function> [<transform-function>]*;

De eigenschap transform specificeert ofwel none of een transform-function.

  • Als none is gespecificeerd, wordt er geen transformatie toegepast.
  • Geef het type transformatie op met <transform-function>. Meerdere transformaties kunnen worden toegepast door ze te scheiden met spaties.

Belangrijkste transformatiefuncties

translate() 
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */
  • De functie translate(x, y) verplaatst een element met de opgegeven afstanden langs de X- en Y-assen. Specificeer x en y met eenheden zoals px of %. Je kunt ook individueel specificeren met translateX() of translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • De functie rotate(angle) draait een element met de opgegeven hoek in graden (deg).
scale() 
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */
  • De functie scale(x, y) schaalt een element langs de X- en Y-assen. x en y zijn schaalfactoren ten opzichte van de originele grootte. Bijvoorbeeld, scale(2, 2) verdubbelt de grootte. Je kunt ook individueel specificeren met scaleX() of scaleY().
skew() 
1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);
  • De functie skew(x-angle, y-angle) schuift een element met opgegeven hoeken langs de X- en Y-assen. Je kunt ook individueel specificeren met skewX() of skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • De functie matrix() specificeert een matrix voor het combineren van meerdere transformaties tegelijk. Dit wordt meestal gebruikt in combinatie met andere transformatiefuncties.

3D-transformatiefuncties

translate3d() 
1/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
9perspective: 600px;
  • De functie translate3d() voert een verplaatsing uit in 3D-ruimte.
    • Het kan worden gespecificeerd in drie dimensies: X-, Y- en Z-assen.
  • Door de eigenschap transform-style op preserve-3d te zetten en de eigenschap perspective op 600px, wordt er een driedimensionaal bewegingseffect met diepte toegepast op de kindelementen.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • De functie rotate3d() voert een rotatie uit in 3D-ruimte.
    • Het roteert een element ten opzichte van de X-, Y- en Z-assen.

Meerdere transformaties combineren 

1transform: rotate(45deg) scale(1.5);

De eigenschap transform kan meerdere transformaties tegelijkertijd toepassen. Bijvoorbeeld, je kunt rotatie en schaal combineren.

Belangrijke punten voor gebruik

De eigenschap transform is een krachtig hulpmiddel in CSS voor het visueel transformeren van elementen. Door verschillende functies te combineren, kun je interactieve en dynamische gebruikersinterfaces creëren.

  • De eigenschap transform maakt directe transformatie van elementen mogelijk, waardoor visuele manipulatie mogelijk is zonder de DOM-layout te wijzigen.
  • Het is zeer nuttig voor het maken van animaties en interactieve elementen, en stelt je in staat dynamische ontwerpen te maken in combinatie met transition of animation.

Eigenschap transform-origin 

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

De eigenschap transform-origin wordt gebruikt om het oorsprongspunt in te stellen voor transformaties die worden toegepast door de transform-eigenschap. Je kunt het referentiepunt voor elementtransformaties opgeven, zodat je kunt bepalen rond welke positie effecten zoals rotatie of schaal worden toegepast.

In dit voorbeeld, wanneer je met de muis over het element beweegt, roteert en schaalt het tegelijkertijd op basis van het punt dat is opgegeven door de eigenschap transform-origin.

Basis Syntax 

1transform-origin: x y z;

Voor de eigenschap transform-origin specificeer je x, y en z op deze manier.

  • Voor x, geef je het referentiepunt op de X-as (horizontale richting) op. Waarden kunnen worden opgegeven met behulp van trefwoorden (left, center, right) of lengtes (px, % etc.).
  • Voor y, geef je het referentiepunt op de Y-as (verticale richting) op. Waarden kunnen worden opgegeven met behulp van trefwoorden (top, center, bottom) of lengtes.
  • Voor z, geef je het referentiepunt op de Z-as (diepte richting) op. Het kan alleen worden gebruikt met 3D-transformaties. Het is optioneel en de standaardwaarde is 0.

Standaardwaarde 

1transform-origin: 50% 50%; /* Center of the element */

De standaardwaarde voor de eigenschap transform-origin is het midden van het element voor zowel de X- als Y-as. Dit betekent dat transformaties standaard worden uitgevoerd met het midden van het element als referentiepunt.

Hoe waarden te specificeren

Waarden voor de eigenschap transform-origin kunnen worden opgegeven met behulp van trefwoorden, percentages, lengtes zoals px, em, enz.

  1. Trefwoordspecificatie

    • left: Stelt de X-as referentie in op de linker rand van het element.
    • right: Stelt de X-as referentie in op de rechter rand van het element.
    • top: Stelt de Y-as referentie in op de bovenste rand van het element.
    • bottom: Stelt de Y-as referentie in op de onderste rand van het element.
    • center: Stelt de referentie in voor de X- of Y-as op het midden van het element.

  2. Percentage Specificatie

    • 0%: Stelt het in op de linker- of bovenkant.
    • 50%: Stelt het in op het midden.
    • 100%: Stelt het in op de rechter- of onderkant.

  3. Lengte Specificatie

    • Je kunt het referentiepunt nauwkeurig aanpassen met specifieke lengtes zoals px, em, enz.

transform-origin in 3D-transformaties 

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin kan ook worden gebruikt voor 3D-transformaties. In 3D-transformaties kun je ook het referentiepunt op de Z-as specificeren. Bijvoorbeeld, door het draaipunt in de diepte te specificeren, zijn transformaties met een gevoel van diepte mogelijk.

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 transparantie