Articles
Pengenalan kepada CSS
Sifat CSS Berkaitan dengan Kesan Penapis

Sifat CSS Berkaitan dengan Kesan Penapis

Artikel ini menerangkan sifat CSS yang berkaitan dengan kesan penapis.

Anda boleh mempelajari kegunaan dan cara menulis sifat seperti filter dan transform.

YouTube Video

HTML untuk Pratonton

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>

Kesan penapis

Sifat 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}

Sifat filter digunakan untuk menambah kesan visual kepada elemen. Anda boleh dengan mudah menambah pelbagai kesan seperti mengaburkan imej atau elemen, menyesuaikan kecerahan, dan mengubah kontras.

  • Kelas filtered-image-sepia mempunyai kesan sepia yang diterapkan.
  • Kelas filtered-image-opacity mempunyai kesan kelegapan yang diterapkan.
  • Kelas filtered-image-multiple mempunyai kecerahan, kontras, dan kesan sepia yang diterapkan pada imej.

Sintaks Asas 

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

Untuk sifat filter, nyatakan none atau filter-function.

  • Menentukan none tidak mengenakan sebarang kesan penapis.
  • Tentukan fungsi penapis yang perlu diterapkan dalam <filter-function>. Penapis berganda boleh ditentukan dengan memisahkan mereka menggunakan ruang.

Jenis-jenis fungsi penapis

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

Fungsi blur() menerapkan kesan kabur.

  • Nilai ditentukan dalam piksel (px) dan semakin besar nilainya, semakin kuat tahap kekaburan.
brightness() 
1filter: brightness(1.5);

Fungsi brightness() melaraskan tahap kecerahan.

  • Nilai ditentukan berdasarkan 0 (gelap sepenuhnya) sehingga 1 (kecerahan asal). Menetapkan nilai lebih besar daripada 1 akan menjadikan elemen lebih cerah.
contrast() 
1filter: contrast(2);

Fungsi contrast() melaraskan tahap kontras.

  • Nilai ditentukan berdasarkan 0 (skala kelabu) hingga 1 (kontras asal), dan nilai yang lebih besar daripada 1 meningkatkan kontras.
grayscale() 
1filter: grayscale(1);

Fungsi grayscale() menukar elemen kepada monokrom.

  • Nilai ditentukan dari 0 (warna asal) hingga 1 (sepenuhnya monokrom).
hue-rotate() 
1filter: hue-rotate(90deg);

Fungsi hue-rotate() memutar rona.

  • Nilai ditentukan dalam darjah (deg), menerapkan perubahan warna dengan memutar rona. Rona berputar dalam julat dari 0deg hingga 360deg.
invert() 
1filter: invert(1);

Fungsi invert() membalikkan warna.

  • Nilai ditentukan dari 0 (warna asal) hingga 1 (sepenuhnya terbalik).
opacity() 
1filter: opacity(0.5);

Fungsi opacity() mengubah ketelusan sesuatu elemen.

  • Nilai ditentukan dalam julat dari 0 (sepenuhnya telus) hingga 1 (legap).
saturate() 
1filter: saturate(2);

Fungsi saturate() menyesuaikan kejenuhan.

  • Julat nilai dari 0 (monokrom) hingga 1 (kejenuhan asal), dan menetapkan nilai melebihi 1 meningkatkan kejenuhan.
sepia() 
1filter: sepia(1);

Fungsi sepia() menukar kepada tona sepia.

  • Nilai ditentukan dari 0 (warna asal) hingga 1 (tona sepia penuh).

Mengaplikasikan Pelbagai Penapis 

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

Pelbagai penapis boleh digunakan, dipisahkan dengan ruang.

Kelebihan Menggunakan Sifat filter

Sifat filter adalah alat yang berkuasa untuk mencipta elemen menarik secara visual dengan mudah. Ia mempunyai kelebihan berikut:.

  • Kesan visual boleh ditambah dengan mudah.
  • Imej boleh disesuaikan menggunakan hanya CSS, tanpa perisian penyuntingan imej.
  • Kesan dinamik boleh dicipta dengan menggabungkannya dengan animasi.

Sifat 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}

Sifat transform digunakan untuk menerapkan transformasi 2D atau 3D kepada elemen. Pelbagai transformasi visual seperti kedudukan, putaran, penskalaan (membesarkan/mengurangkan), dan condongan boleh ditentukan dengan CSS. Sifat transform sering digunakan bersama dengan animasi dan membantu untuk mencipta elemen UI dinamik.

  • Dalam kelas transform-scale, melayang di atas elemen akan memperbesar lebarnya sebanyak 1.5 kali dan tingginya sebanyak 2 kali.

  • Dalam kelas transform-skew, melayang di atas elemen akan memutarnya sebanyak 30 darjah pada paksi X dan 20 darjah pada paksi Y.

  • Dalam kelas transform-rotate, melayang di atas elemen akan memutarnya sebanyak 45 darjah dan memperbesarnya sebanyak 1.5 kali.

Sintaks Asas 

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

Harta transform menentukan sama ada none atau transform-function.

  • Jika none ditentukan, tiada transformasi akan dikenakan.
  • Tentukan jenis transformasi dengan <transform-function>. Transformasi berganda boleh digunakan dengan memisahkannya menggunakan ruang.

Fungsi Transformasi Utama

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 */
  • Fungsi translate(x, y) menggerakkan elemen dengan jarak tertentu pada paksi X dan Y. Tentukan x dan y menggunakan unit seperti px atau %. Anda juga boleh menentukan secara individu dengan translateX() atau translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • Fungsi rotate(angle) memutar elemen dengan sudut tertentu dalam darjah (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 */
  • Fungsi scale(x, y) menskalakan elemen pada paksi X dan Y. x dan y adalah faktor skala berbanding dengan saiz asal. Sebagai contoh, scale(2, 2) akan menggandakan saiz. Anda boleh menentukan secara individu dengan scaleX() atau 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);
  • Fungsi skew(x-angle, y-angle) mencondongkan elemen dengan sudut tertentu pada paksi X dan Y. Anda boleh menentukan secara individu dengan skewX() atau skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • Fungsi matrix() menentukan matriks untuk menggabungkan transformasi berganda sekaligus. Ia biasanya digunakan bersama dengan fungsi transformasi yang lain.

Fungsi transformasi 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;
  • Fungsi translate3d() melakukan translasi dalam ruang 3D.
    • Ia boleh ditentukan dalam tiga dimensi: paksi X, Y, dan Z.
  • Dengan menetapkan sifat transform-style kepada preserve-3d dan sifat perspective kepada 600px, kesan pergerakan tiga dimensi dengan kedalaman akan digunakan pada elemen anak.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • Fungsi rotate3d() melakukan putaran dalam ruang 3D.
    • Ia memutar elemen berkenaan dengan paksi X, Y, dan Z.

Menggabungkan pelbagai transformasi 

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

Sifat transform boleh menerapkan pelbagai transformasi secara serentak. Sebagai contoh, anda boleh menggabungkan putaran dan penskalaan.

Titik penting untuk penggunaan

Sifat transform adalah alat yang kuat dalam CSS untuk mengubah elemen secara visual. Dengan menggabungkan pelbagai fungsi, anda boleh mencipta UI interaktif dan dinamik.

  • Sifat transform membolehkan transformasi langsung pada elemen, membolehkan manipulasi visual tanpa mengubah susunan DOM.
  • Ia sangat berguna untuk mencipta animasi dan elemen interaktif, membolehkan reka bentuk dinamik apabila digabungkan dengan transition atau animation.

Sifat 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}

Sifat transform-origin digunakan untuk menetapkan titik asal bagi transformasi yang diterapkan oleh sifat transform. Anda boleh menentukan titik rujukan untuk transformasi elemen, membolehkan anda mengawal di sekitar posisi mana kesan seperti putaran atau penskalaan diterapkan.

Dalam contoh ini, apabila anda menggerakkan tetikus di atas elemen, ia akan berputar dan berskala serentak berdasarkan titik yang ditentukan oleh sifat transform-origin.

Sintaks Asas 

1transform-origin: x y z;

Untuk sifat transform-origin, anda menentukan x, y, dan z seperti ini.

  • Untuk x, tetapkan titik rujukan pada sumbu-X (arah mendatar). Nilai boleh ditentukan menggunakan kata kunci (left, center, right) atau panjang (px, %, dll.).
  • Untuk y, tetapkan titik rujukan pada sumbu-Y (arah menegak). Nilai boleh ditentukan menggunakan kata kunci (top, center, bottom) atau panjang.
  • Untuk z, tetapkan titik rujukan pada sumbu-Z (arah kedalaman). Ia hanya boleh digunakan dengan transformasi 3D. Ia adalah pilihan, dan nilai lalainya adalah 0.

Nilai Lalai 

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

Nilai lalai untuk sifat transform-origin adalah pusat elemen untuk kedua-dua sumbu X dan Y. Ini bermakna, secara lalai, transformasi dilakukan dengan pusat elemen sebagai titik rujukan.

Cara Menentukan Nilai

Nilai untuk sifat transform-origin boleh ditentukan menggunakan kata kunci, peratusan, panjang seperti px, em, dll.

  1. Spesifikasi Kata Kunci

    • left: Menetapkan rujukan paksi-X ke tepi kiri elemen.
    • right: Menetapkan rujukan paksi-X ke tepi kanan elemen.
    • top: Menetapkan rujukan paksi-Y ke tepi atas elemen.
    • bottom: Menetapkan rujukan paksi-Y ke tepi bawah elemen.
    • center: Menetapkan rujukan untuk paksi-X atau paksi-Y ke pusat elemen.

  2. Spesifikasi Peratusan

    • 0%: Menetapkannya ke tepi kiri atau atas.
    • 50%: Menetapkannya ke pusat.
    • 100%: Menetapkannya ke tepi kanan atau bawah.

  3. Spesifikasi Panjang

    • Anda boleh melaraskan titik rujukan dengan tepat menggunakan panjang tertentu seperti px, em, dan lain-lain.

transform-origin dalam Transformasi 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 juga boleh digunakan untuk transformasi 3D. Dalam transformasi 3D, anda juga boleh menentukan titik rujukan pada paksi-Z. Sebagai contoh, dengan menentukan pusat putaran dalam arah kedalaman, transformasi dengan rasa kedalaman adalah mungkin.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

CSS sifat berkaitan dengan ketelusan