Articles
Introduksjon til CSS
CSS-egenskaper relatert til filtereffekter

CSS-egenskaper relatert til filtereffekter

Denne artikkelen forklarer CSS-egenskaper relatert til filtereffekter.

Du kan lære om bruken og hvordan du skriver egenskaper som filter og transform.

YouTube Video

HTML for Forhåndsvisning

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>

Filtereffekter

filter-egenskap 

 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}

filter-egenskapen brukes til å legge visuelle effekter til elementer. Du kan lett legge til forskjellige effekter som å gjøre bilder eller elementer uklare, justere lysstyrke og endre kontrast.

  • Klassen filtered-image-sepia har en sepieeffekt anvendt.
  • Klassen filtered-image-opacity har en gjennomsiktighetseffekt anvendt.
  • Klassen filtered-image-multiple har lysstyrke-, kontrast- og sepieeffekter anvendt på bildet.

Grunnleggende Syntax 

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

For filter-egenskapen, spesifiser none eller en filter-function.

  • Å spesifisere none bruker ingen filtereffekter.
  • Spesifiser filterfunksjonen som skal brukes i <filter-function>. Flere filtre kan spesifiseres ved å skille dem med mellomrom.

Typer av filterfunksjoner

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

blur()-funksjonen legger til en uskarphetseffekt.

  • Verdien spesifiseres i piksler (px), og jo større verdien er, desto sterkere grad av uskarphet.
brightness() 
1filter: brightness(1.5);

brightness()-funksjonen justerer lysstyrken.

  • Verdien spesifiseres fra 0 (helt mørkt) til 1 (opprinnelig lysstyrke). Å spesifisere en verdi større enn 1 gjør elementet lysere.
contrast() 
1filter: contrast(2);

contrast()-funksjonen justerer kontrasten.

  • Verdien spesifiseres fra 0 (gråtoner) til 1 (opprinnelig kontrast), og verdier større enn 1 øker kontrasten.
grayscale() 
1filter: grayscale(1);

grayscale()-funksjonen konverterer elementet til monokrom.

  • Verdien er spesifisert fra 0 (originalfarge) til 1 (helt monokrom).
hue-rotate() 
1filter: hue-rotate(90deg);

hue-rotate()-funksjonen roterer fargenyanser.

  • Verdiene spesifiseres i grader (deg) og endrer fargene ved å rotere fargenyanser. Fargenyanser roteres i området fra 0deg til 360deg.
invert() 
1filter: invert(1);

invert()-funksjonen inverterer fargene.

  • Verdiene spesifiseres fra 0 (originalfarge) til 1 (helt invertert).
opacity() 
1filter: opacity(0.5);

opacity()-funksjonen endrer gjennomsiktigheten til et element.

  • Verdiene spesifiseres i området fra 0 (helt gjennomsiktig) til 1 (ugjennomsiktig).
saturate() 
1filter: saturate(2);

saturate()-funksjonen justerer metningen.

  • Verdiene varierer fra 0 (monokrom) til 1 (original metning), og å spesifisere verdier større enn 1 forbedrer metningen ytterligere.
sepia() 
1filter: sepia(1);

sepia()-funksjonen konverterer til sepia-tone.

  • Verdiene spesifiseres fra 0 (originalfarge) til 1 (full sepia-tone).

Bruke flere filtre 

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

Flere filtre kan brukes, adskilt med mellomrom.

Fordeler med å bruke filter-egenskapen

filter-egenskapen er et kraftig verktøy for å enkelt lage visuelt tiltalende elementer. Den har følgende fordeler:.

  • Visuelle effekter kan enkelt legges til.
  • Bilder kan justeres ved hjelp av kun CSS, uten bruk av bildebehandlingsprogramvare.
  • Dynamiske effekter kan opprettes ved å kombinere med animasjoner.

transform-egenskapen 

 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}

transform-egenskapen brukes til å påføre 2D- eller 3D-transformasjoner på elementer. Ulike visuelle transformasjoner som posisjon, rotasjon, skalering (forstørre/forminske) og skjevhet kan spesifiseres med CSS. transform-egenskapen brukes ofte i kombinasjon med animasjoner og hjelper med å lage dynamiske UI-elementer.

  • I transform-scale-klassen øker bredden med 1,5 ganger og høyden med 2 ganger når man holder musepekeren over elementet.

  • I transform-skew-klassen roterer elementet med 30 grader på X-aksen og 20 grader på Y-aksen når man holder musepekeren over det.

  • I transform-rotate-klassen roteres elementet med 45 grader og forstørres med 1,5 ganger når man holder musepekeren over det.

Grunnleggende Syntax 

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

transform-egenskapen spesifiserer enten none eller en transform-function.

  • Hvis none er angitt, vil ingen transformasjon bli brukt.
  • Angi typen transformasjon med <transform-function>. Flere transformasjoner kan brukes ved å separere dem med mellomrom.

Hovedtransformasjonsfunksjoner

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 */
  • translate(x, y)-funksjonen flytter et element med de angitte avstandene langs X- og Y-aksene. Angi x og y ved å bruke enheter som px eller %. Du kan også angi individuelt med translateX() eller translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • rotate(angle)-funksjonen roterer et element med den angitte vinkelen i grader (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 */
  • scale(x, y)-funksjonen skalerer et element langs X- og Y-aksene. x og y er skaleringsfaktorer i forhold til originalstørrelsen. For eksempel vil scale(2, 2) doble størrelsen. Du kan angi individuelt med scaleX() eller 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);
  • skew(x-angle, y-angle)-funksjonen skjevstiller et element med de angitte vinklene langs X- og Y-aksene. Du kan angi individuelt med skewX() eller skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • matrix()-funksjonen spesifiserer en matrise for å kombinere flere transformasjoner på én gang. Den brukes vanligvis i kombinasjon med andre transformasjonsfunksjoner.

3D-transformasjonsfunksjoner

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;
  • translate3d()-funksjonen utfører en forskyvning i 3D-rom.
    • Den kan spesifiseres i tre dimensjoner: X-, Y- og Z-aksene.
  • Ved å sette transform-style-egenskapen til preserve-3d og perspective-egenskapen til 600px, får barneelementene en tredimensjonal bevegelseseffekt med dybde.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • rotate3d()-funksjonen utfører en rotasjon i 3D-rom.
    • Den roterer et element med hensyn til X-, Y- og Z-aksene.

Kombinere flere transformasjoner 

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

transform-egenskapen kan bruke flere transformasjoner samtidig. For eksempel kan du kombinere rotasjon og skalering.

Nøkkelelementer for bruk

transform-egenskapen er et kraftig verktøy i CSS for visuell transformasjon av elementer. Ved å kombinere ulike funksjoner kan du lage interaktive og dynamiske brukergrensesnitt.

  • transform-egenskapen tillater direkte transformasjon av elementer, som muliggjør visuell manipulasjon uten å endre DOM-oppsettet.
  • Det er veldig nyttig for å lage animasjoner og interaktive elementer, og muliggjør dynamiske design når det kombineres med transition eller animation.

transform-origin-egenskapen 

 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}

transform-origin-egenskapen brukes til å angi utgangspunktet for transformasjoner brukt av transform-egenskapen. Du kan angi referansepunktet for transformasjoner av elementer, slik at du kan kontrollere hvilken posisjon effekter som rotasjon eller skalering blir anvendt rundt.

I dette eksempelet, når du holder musen over elementet, roterer og skalerer det samtidig basert på punktet spesifisert av transform-origin-egenskapen.

Grunnleggende Syntax 

1transform-origin: x y z;

For transform-origin-egenskapen spesifiserer du x, y og z slik.

  • For x spesifiserer du referansepunktet på X-aksen (horisontal retning). Verdier kan spesifiseres ved hjelp av nøkkelord (left, center, right) eller lengdemål (px, % osv.).
  • For y spesifiserer du referansepunktet på Y-aksen (vertikal retning). Verdier kan spesifiseres med nøkkelord (top, center, bottom) eller lengdemål.
  • For z spesifiserer du referansepunktet på Z-aksen (dybderetning). Det kan kun brukes med 3D-transformasjoner. Dette er valgfritt, og standardverdien er 0.

Standardverdi 

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

Standardverdien for transform-origin-egenskapen er midten av elementet for både X- og Y-aksene. Dette betyr at transformasjoner som standard utføres med midten av elementet som referansepunkt.

Hvordan spesifisere verdier

Verdier for transform-origin-egenskapen kan spesifiseres med nøkkelord, prosentandeler, lengder som px, em, osv.

  1. Spesifikasjon av nøkkelord

    • left: Setter X-aksereferansen til venstre kant av elementet.
    • right: Setter X-aksereferansen til høyre kant av elementet.
    • top: Setter Y-aksereferansen til øvre kant av elementet.
    • bottom: Setter Y-aksereferansen til nedre kant av elementet.
    • center: Setter referansen for enten X- eller Y-aksen til midten av elementet.

  2. Prosentspesifikasjon

    • 0%: Setter det til venstre eller øvre kant.
    • 50%: Setter det til midten.
    • 100%: Setter det til høyre eller nedre kant.

  3. Lengdespesifikasjon

    • Du kan finjustere referansepunktet ved hjelp av spesifikke lengder som px, em osv.

transform-origin i 3D-transformasjoner 

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 også brukes til 3D-transformasjoner. I 3D-transformasjoner kan du også spesifisere referansepunktet på Z-aksen. For eksempel, ved å spesifisere rotasjonssenteret i dybderetningen, er transformasjoner med en følelse av dybde mulig.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper relatert til gjennomsiktighetAnimasjonsrelaterte CSS-egenskaper