CSS-egenskaper relaterade till filtereffekter

Articles

Den här artikeln förklarar CSS-egenskaper relaterade till filtereffekter.

Du kan lära dig om användningarna och hur man skriver egenskaper som filter och transform.

YouTube Video

HTML för förhandsgranskning

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(50px, 50px, 50px)</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">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            </section>
157        </article>
158    </main>
159</body>
160</html>

Filtreeffekter

`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 används för att applicera visuella effekter på element. Du kan enkelt lägga till olika effekter som att sudda ut bilder eller element, justera ljusstyrka och ändra kontrast.

Klassen filtered-image-sepia har en sepiaeffekt applicerad.
Klassen filtered-image-opacity har en opacitetseffekt applicerad.
Klassen filtered-image-multiple har ljusstyrka, kontrast och sepiaeffekter applicerade på bilden.

Grundläggande syntax

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

För filter-egenskapen, specificera none eller en filter-function.

Att specificera none applicerar inga filtereffekter.
Specificera filterfunktionen att tillämpa i <filter-function>. Flera filter kan specificeras genom att separera dem med mellanslag.

Typer av filterfunktioner

`blur()`

1filter: blur(5px);

Funktionen blur() applicerar en suddningseffekt.

Värdet specificeras i pixlar (px) och ju större värdet är, desto starkare blir suddningen.

`brightness()`

1filter: brightness(1.5);

Funktionen brightness() justerar ljusstyrkan.

Värdet specificeras baserat på 0 (helt mörkt) till 1 (ursprunglig ljusstyrka). Att specificera ett värde större än 1 gör elementet ljusare.

`contrast()`

1filter: contrast(2);

Funktionen contrast() justerar kontrasten.

Värdet specificeras baserat på 0 (gråskala) till 1 (ursprunglig kontrast), och värden större än 1 förstärker kontrasten.

`grayscale()`

1filter: grayscale(1);

Funktionen grayscale() konverterar elementet till monokrom.

Värdet anges från 0 (ursprunglig färg) till 1 (helt monokromt).

`hue-rotate()`

1filter: hue-rotate(90deg);

Funktionen hue-rotate() roterar nyansen.

Värden anges i grader (deg) och tillämpar färgförändringar genom att rotera nyansen. Nyansen roterar inom intervallet från 0deg till 360deg.

`invert()`

1filter: invert(1);

Funktionen invert() inverterar färgerna.

Värden anges från 0 (ursprunglig färg) till 1 (helt inverterat).

`opacity()`

1filter: opacity(0.5);

Funktionen opacity() ändrar genomskinligheten hos ett element.

Värden anges inom intervallet från 0 (helt genomskinligt) till 1 (ogenomskinligt).

`saturate()`

1filter: saturate(2);

Funktionen saturate() justerar mättnaden.

Värden sträcker sig från 0 (monokrom) till 1 (ursprunglig mättnad), och att ange värden större än 1 ökar mättnaden.

`sepia()`

1filter: sepia(1);

Funktionen sepia() omvandlar till sepiaton.

Värden anges från 0 (ursprunglig färg) till 1 (full sepiaton).

Tillämpa flera filter

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

Flera filter kan tillämpas, separerade med mellanslag.

Fördelar med att använda egenskapen `filter`

Egenskapen filter är ett kraftfullt verktyg för att enkelt skapa visuellt tilltalande element. Den har följande fördelar:.

Visuella effekter kan enkelt läggas till.
Bilder kan justeras med enbart CSS, utan bildredigeringsprogram.
Dynamiska effekter kan skapas genom att kombinera med animationer.

Egenskapen `transform`

 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}

Egenskapen transform används för att tillämpa 2D- eller 3D-transformationer på element. Olika visuella transformationer som position, rotation, skalning (förstora/förminska) och skevning kan anges med CSS. Egenskapen transform används ofta i kombination med animationer och hjälper till att skapa dynamiska UI-element.

I transform-scale-klassen förstorar hovring över elementet dess bredd med 1,5 gånger och dess höjd med 2 gånger.
I transform-skew-klassen roterar hovring över elementet det med 30 grader på X-axeln och 20 grader på Y-axeln.
I transform-rotate-klassen roterar hovring över elementet det med 45 grader och förstorar det med 1,5 gånger.

Grundläggande syntax

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

transform-egenskapen specificerar antingen none eller en transform-function.

Om none specificeras, kommer ingen transformation att tillämpas.
Specificera typen av transformation med <transform-function>. Flera transformationer kan tillämpas genom att separera dem med mellanslag.

Huvudsakliga transformationsfunktioner

`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 */

Funktionen translate(x, y) flyttar ett element med de angivna avstånden längs X- och Y-axlarna. Ange x och y med enheter som px eller %. Du kan också ange dem enskilt med translateX() eller translateY().

`rotate()`

1transform: rotate(45deg); /* Rotate 45 degrees */

Funktionen rotate(angle) roterar ett element med den angivna vinkeln 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 */

Funktionen scale(x, y) skalar ett element längs X- och Y-axlarna. x och y är skalfaktorer i förhållande till den ursprungliga storleken. Till exempel, scale(2, 2) kommer att fördubbla storleken. Du kan ange dem enskilt 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);

Funktionen skew(x-angle, y-angle) skevar ett element med angivna vinklar längs X- och Y-axlarna. Du kan ange dem enskilt med skewX() eller skewY().

`matrix()`

1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);

Funktionen matrix() specificerar en matris för att kombinera flera transformationer samtidigt. Den används vanligtvis i kombination med andra transformationsfunktioner.

3D-transformationsfunktioner

`translate3d()`

1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;

Funktionen translate3d() utför translation i 3D-rymd.
- Den kan specificeras i tre dimensioner: X-, Y- och Z-axlar.
Genom att ställa in egenskapen transform-style till preserve-3d och egenskapen perspective till 600px appliceras en tredimensionell rörelseeffekt med djup på underordnade element.

`rotate3d()`

1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;

Funktionen rotate3d() utför rotation i 3D-rymd.
- Den roterar ett element med avseende på X-, Y- och Z-axlar.

Kombinera flera transformationer

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

transform-egenskapen kan tillämpa flera transformationer samtidigt. Till exempel kan du kombinera rotation och skalning.

Viktiga punkter för användning

transform-egenskapen är ett kraftfullt verktyg i CSS för att visuellt transformera element. Genom att kombinera olika funktioner kan du skapa interaktiva och dynamiska användargränssnitt.

transform-egenskapen möjliggör direkt transformation av element, vilket tillåter visuell manipulation utan att ändra DOM-layouten.
Den är mycket användbar för att skapa animationer och interaktiva element, och möjliggör dynamiska designer när den kombineras 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}

transform-origin-egenskapen används för att sätta utgångspunkten för transformationer som tillämpas av transform-egenskapen. Du kan specificera referenspunkten för elementtransformationer, vilket låter dig kontrollera kring vilken position effekter som rotation eller skalning tillämpas.

I det här exemplet, när du för muspekaren över elementet, roterar och skalas det samtidigt baserat på punkten som specificeras av transform-origin-egenskapen.

Grundläggande syntax

1transform-origin: x y z;

För transform-origin-egenskapen specificerar du x, y och z så här.

För x, specificera referenspunkten på X-axeln (horisontell riktning). Värden kan specificeras med nyckelord (left, center, right) eller längder (px, % etc.).
För y, specificera referenspunkten på Y-axeln (vertikal riktning). Värden kan specificeras med nyckelord (top, center, bottom) eller längder.
För z, specificera referenspunkten på Z-axeln (djup riktning). Det kan bara användas med 3D-transformationer. Det är valfritt och standardvärdet är 0.

Standardvärde

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

Standardvärdet för transform-origin-egenskapen är elementets mittpunkt för både X- och Y-axlarna. Detta innebär att transformationer som standard utförs med elementets mittpunkt som referenspunkt.

Hur man anger värden

Värden för transform-origin-egenskapen kan specificeras med nyckelord, procenttal, längder som px, em etc.

Nyckelordspecifikation
- left: Ställer in X-axelns referens till elementets vänstra kant.
- right: Ställer in X-axelns referens till elementets högra kant.
- top: Ställer in Y-axelns referens till elementets övre kant.
- bottom: Ställer in Y-axelns referens till elementets nedre kant.
- center: Ställer in referenspunkten för antingen X- eller Y-axeln till elementets mittpunkt.
Procentangivelse
- 0%: Ställer in den till den vänstra eller övre kanten.
- 50%: Ställer in den till mitten.
- 100%: Ställer in den till den högra eller nedre kanten.
Längdangivelse
- Du kan finjustera referenspunkten med hjälp av specifika längder som px, em, etc.

`transform-origin` i 3D-transformationer

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 även användas för 3D-transformationer. Vid 3D-transformationer kan du också ange referenspunkten på Z-axeln. Genom att till exempel ange rotationscentrum i djupets riktning kan transformationer med en känsla av djup uppnås.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper relaterade till transparens

CSS-egenskaper relaterade till filtereffekter

YouTube Video

HTML för förhandsgranskning

Filtreeffekter

filter-egenskap

Grundläggande syntax

Typer av filterfunktioner

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

Tillämpa flera filter

Fördelar med att använda egenskapen filter

Egenskapen transform

Grundläggande syntax

Huvudsakliga transformationsfunktioner

translate()

rotate()

scale()

skew()

matrix()

3D-transformationsfunktioner

translate3d()

rotate3d()

Kombinera flera transformationer

Viktiga punkter för användning

transform-origin-egenskapen

Grundläggande syntax

Standardvärde

Hur man anger värden

transform-origin i 3D-transformationer

YouTube Video

`filter`-egenskap

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

Fördelar med att använda egenskapen `filter`

Egenskapen `transform`

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

`transform-origin`-egenskapen

`transform-origin` i 3D-transformationer