Właściwości CSS związane z efektami filtrów

Articles

Ten artykuł wyjaśnia właściwości CSS związane z efektami filtrów.

Możesz dowiedzieć się, jak używać i pisać właściwości takie jak filter i transform.

YouTube Video

HTML do podglądu

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>

Efekty filtra

Właściwość `filter`

 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}

Właściwość filter jest używana do stosowania efektów wizualnych do elementów. Możesz łatwo dodać różnorodne efekty, takie jak rozmycie obrazów lub elementów, regulację jasności i zmianę kontrastu.

Klasa filtered-image-sepia ma zastosowany efekt sepii.
Klasa filtered-image-opacity ma zastosowany efekt przezroczystości.
Klasa filtered-image-multiple ma zastosowane efekty jasności, kontrastu i sepii do obrazu.

Podstawowa składnia

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

Dla właściwości filter określ none lub filter-function.

Określenie none nie stosuje żadnych efektów filtra.
Określ funkcję filtru do zastosowania w <filter-function>. Można określić wiele filtrów, oddzielając je spacjami.

Rodzaje funkcji filtrów

`blur()`

1filter: blur(5px);

Funkcja blur() stosuje efekt rozmycia.

Wartość jest określana w pikselach (px), a im większa wartość, tym większy stopień rozmycia.

`brightness()`

1filter: brightness(1.5);

Funkcja brightness() reguluje jasność.

Wartość jest określana w przedziale od 0 (całkowicie ciemne) do 1 (oryginalna jasność). Określenie wartości większej niż 1 sprawia, że element staje się jaśniejszy.

`contrast()`

1filter: contrast(2);

Funkcja contrast() reguluje kontrast.

Wartość jest określana w przedziale od 0 (odcienie szarości) do 1 (oryginalny kontrast), a wartości większe niż 1 zwiększają kontrast.

`grayscale()`

1filter: grayscale(1);

Funkcja grayscale() konwertuje element na czarno-biały.

Wartość jest określana od 0 (oryginalny kolor) do 1 (całkowicie monochromatyczny).

`hue-rotate()`

1filter: hue-rotate(90deg);

Funkcja hue-rotate() obraca barwę.

Wartości są określane w stopniach (deg), zmieniając barwy poprzez obracanie odcienia. Barwa obraca się w zakresie od 0deg do 360deg.

`invert()`

1filter: invert(1);

Funkcja invert() odwraca kolory.

Wartości są określane od 0 (oryginalny kolor) do 1 (całkowicie odwrócone).

`opacity()`

1filter: opacity(0.5);

Funkcja opacity() zmienia przezroczystość elementu.

Wartości są określane w zakresie od 0 (całkowicie przezroczysty) do 1 (nieprzezroczysty).

`saturate()`

1filter: saturate(2);

Funkcja saturate() reguluje nasycenie.

Wartości mieszczą się w zakresie od 0 (monochromatyczne) do 1 (oryginalne nasycenie), a wartości większe niż 1 zwiększają nasycenie.

`sepia()`

1filter: sepia(1);

Funkcja sepia() konwertuje na ton sepii.

Wartości są określane od 0 (oryginalny kolor) do 1 (pełny ton sepii).

Stosowanie wielu filtrów

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

Można zastosować wiele filtrów, oddzielając je spacjami.

Zalety używania właściwości `filter`

Właściwość filter to potężne narzędzie do łatwego tworzenia atrakcyjnych wizualnie elementów. Posiada następujące zalety:.

Efekty wizualne można dodawać z łatwością.
Obrazy można dostosowywać wyłącznie za pomocą CSS, bez konieczności używania oprogramowania do edycji obrazów.
Dynamiczne efekty można tworzyć dzięki połączeniu z animacjami.

Właściwość `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}

Właściwość transform służy do stosowania transformacji 2D lub 3D na elementach. Za pomocą CSS można określić różne transformacje wizualne, takie jak pozycja, obrót, skalowanie (powiększanie/pomniejszanie) i pochylanie. Właściwość transform jest często używana w połączeniu z animacjami i pomaga w tworzeniu dynamicznych elementów interfejsu użytkownika.

W klasie transform-scale najechanie kursorem na element powiększa jego szerokość 1,5-krotnie, a wysokość 2-krotnie.
W klasie transform-skew najechanie kursorem na element obraca go o 30 stopni względem osi X i 20 stopni względem osi Y.
W klasie transform-rotate najechanie kursorem na element obraca go o 45 stopni i powiększa o 1,5 raza.

Podstawowa składnia

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

Właściwość transform określa none lub transform-function.

Jeśli określono none, żadna transformacja nie zostanie zastosowana.
Określ rodzaj transformacji za pomocą <transform-function>. Wiele transformacji można zastosować, oddzielając je spacjami.

Główne funkcje transformacji

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

Funkcja translate(x, y) przesuwa element o określone odległości wzdłuż osi X i Y. Określ wartości x i y za pomocą jednostek takich jak px lub %. Możesz także określić indywidualnie za pomocą translateX() lub translateY().

`rotate()`

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

Funkcja rotate(angle) obraca element o określony kąt w stopniach (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 */

Funkcja scale(x, y) skaluje element wzdłuż osi X i Y. x i y to współczynniki skalowania względem pierwotnego rozmiaru. Na przykład scale(2, 2) podwoi rozmiar. Możesz także określić indywidualnie za pomocą scaleX() lub 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);

Funkcja skew(x-angle, y-angle) przechyla element o określone kąty wzdłuż osi X i Y. Możesz także określić indywidualnie za pomocą skewX() lub skewY().

`matrix()`

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

Funkcja matrix() określa macierz do jednoczesnego łączenia wielu transformacji. Zazwyczaj jest używana w połączeniu z innymi funkcjami transformacji.

Funkcje transformacji 3D

`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;

Funkcja translate3d() wykonuje translację w przestrzeni 3D.
- Może być określona w trzech wymiarach: osie X, Y i Z.
Ustawiając właściwość transform-style na preserve-3d oraz właściwość perspective na 600px, na elementach potomnych stosowany jest trójwymiarowy efekt ruchu z głębią.

`rotate3d()`

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

Funkcja rotate3d() wykonuje obrót w przestrzeni 3D.
- Obraca element względem osi X, Y i Z.

Łączenie wielu transformacji

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

Właściwość transform może jednocześnie zastosować wiele transformacji. Na przykład możesz połączyć obrót i skalowanie.

Kluczowe aspekty użytkowania

Właściwość transform jest potężnym narzędziem w CSS do wizualnej transformacji elementów. Łącząc różne funkcje, możesz tworzyć interfejsy użytkownika, które są interaktywne i dynamiczne.

Właściwość transform pozwala na bezpośrednie przekształcanie elementów, umożliwiając manipulację wizualną bez zmieniania układu DOM.
Jest bardzo przydatna do tworzenia animacji i interaktywnych elementów, umożliwiając dynamiczne projekty w połączeniu z transition lub animation.

Właściwość `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}

Właściwość transform-origin jest używana do ustawienia punktu odniesienia dla przekształceń zastosowanych przez właściwość transform. Możesz określić punkt odniesienia dla przekształceń elementów, co pozwala kontrolować pozycję, wokół której stosowane są efekty, takie jak obrót czy skalowanie.

W tym przykładzie, gdy najeżdżasz myszą na element, obraca się i skaluje jednocześnie na podstawie punktu określonego przez właściwość transform-origin.

Podstawowa składnia

1transform-origin: x y z;

Dla właściwości transform-origin określasz x, y i z w następujący sposób.

Dla x określ punkt odniesienia na osi X (kierunek poziomy). Wartości można określić za pomocą słów kluczowych (left, center, right) lub jednostek długości (px, % itp.).
Dla y określ punkt odniesienia na osi Y (kierunek pionowy). Wartości można określić za pomocą słów kluczowych (top, center, bottom) lub jednostek długości.
Dla z określ punkt odniesienia na osi Z (kierunek głębi). Można ją używać tylko z transformacjami 3D. Jest opcjonalna, a domyślną wartością jest 0.

Domyślna wartość

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

Domyślna wartość właściwości transform-origin to środek elementu zarówno dla osi X, jak i Y. Oznacza to, że domyślnie transformacje są wykonywane z punktem odniesienia w środku elementu.

Jak Określić Wartości

Wartości dla właściwości transform-origin można określić za pomocą słów kluczowych, procentów, długości takich jak px, em itp.

Specyfikacja słów kluczowych
- left: Ustawia odniesienie osi X na lewą krawędź elementu.
- right: Ustawia odniesienie osi X na prawą krawędź elementu.
- top: Ustawia odniesienie osi Y na górną krawędź elementu.
- bottom: Ustawia odniesienie osi Y na dolną krawędź elementu.
- center: Ustawia odniesienie osi X lub Y na środek elementu.
Specyfikacja procentowa
- 0%: Ustawia na lewą lub górną krawędź.
- 50%: Ustawia na środek.
- 100%: Ustawia na prawą lub dolną krawędź.
Specyfikacja długości
- Możesz precyzyjnie dostosować punkt odniesienia, używając określonych długości, takich jak px, em, itd.

`transform-origin` w transformacjach 3D

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 można również używać do transformacji 3D. W transformacjach 3D możesz również określić punkt odniesienia na osi Z. Na przykład, określając środek obrotu w kierunku głębokości, możliwe są transformacje z poczuciem głębi.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z przezroczystością

Właściwości CSS związane z efektami filtrów

YouTube Video

HTML do podglądu

Efekty filtra

Właściwość filter

Podstawowa składnia

Rodzaje funkcji filtrów

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

Stosowanie wielu filtrów

Zalety używania właściwości filter

Właściwość transform

Podstawowa składnia

Główne funkcje transformacji

translate()

rotate()

scale()

skew()

matrix()

Funkcje transformacji 3D

translate3d()

rotate3d()

Łączenie wielu transformacji

Kluczowe aspekty użytkowania

Właściwość transform-origin

Podstawowa składnia

Domyślna wartość

Jak Określić Wartości

transform-origin w transformacjach 3D

YouTube Video

Właściwość `filter`

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

Zalety używania właściwości `filter`

Właściwość `transform`

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

Właściwość `transform-origin`

`transform-origin` w transformacjach 3D