Articles
Pengenalan ke CSS
Properti CSS Terkait Efek Filter

Properti CSS Terkait Efek Filter

Artikel ini menjelaskan properti CSS yang terkait dengan efek filter.

Anda dapat mempelajari penggunaan dan cara menulis properti seperti filter dan transform.

YouTube Video

HTML untuk Pratinjau

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>

Efek Filter

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

Properti filter digunakan untuk menerapkan efek visual pada elemen. Anda dapat dengan mudah menambahkan berbagai efek seperti membuat gambar atau elemen menjadi blur, menyesuaikan kecerahan, dan mengubah kontras.

  • Kelas filtered-image-sepia memiliki efek sepia yang diterapkan.
  • Kelas filtered-image-opacity memiliki efek opasitas yang diterapkan.
  • Kelas filtered-image-multiple memiliki efek kecerahan, kontras, dan sepia yang diterapkan pada gambar.

Sintaks Dasar 

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

Untuk properti filter, tentukan none atau filter-function.

  • Menentukan none tidak menerapkan efek filter apa pun.
  • Tentukan fungsi filter untuk diterapkan di <filter-function>. Beberapa filter dapat ditentukan dengan memisahkannya menggunakan spasi.

Jenis-jenis fungsi filter

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

Fungsi blur() menerapkan efek blur.

  • Nilainya ditentukan dalam piksel (px) dan semakin besar nilainya, semakin kuat tingkat blur-nya.
brightness() 
1filter: brightness(1.5);

Fungsi brightness() menyesuaikan kecerahan.

  • Nilainya ditentukan berdasarkan 0 (sepenuhnya gelap) hingga 1 (kecerahan asli). Menentukan nilai lebih besar dari 1 membuat elemen menjadi lebih terang.
contrast() 
1filter: contrast(2);

Fungsi contrast() menyesuaikan kontras.

  • Nilainya ditentukan berdasarkan 0 (skala abu-abu) hingga 1 (kontras asli), dan nilai lebih besar dari 1 meningkatkan kontras.
grayscale() 
1filter: grayscale(1);

Fungsi grayscale() mengubah elemen menjadi monokrom.

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

Fungsi hue-rotate() memutar rona.

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

Fungsi invert() membalikkan warna.

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

Fungsi opacity() mengubah transparansi elemen.

  • Nilai ditentukan dalam rentang dari 0 (sepenuhnya transparan) hingga 1 (tidak transparan).
saturate() 
1filter: saturate(2);

Fungsi saturate() mengatur saturasi.

  • Nilai berkisar dari 0 (monokrom) hingga 1 (saturasi asli), dan nilai lebih dari 1 meningkatkan saturasi.
sepia() 
1filter: sepia(1);

Fungsi sepia() mengubah menjadi nada sepia.

  • Nilai ditentukan dari 0 (warna asli) hingga 1 (sepenuhnya nada sepia).

Menerapkan Beberapa Filter 

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

Beberapa filter dapat diterapkan, dipisahkan dengan spasi.

Keuntungan Menggunakan Properti filter

Properti filter adalah alat yang ampuh untuk membuat elemen yang menarik secara visual dengan mudah. Properti ini memiliki keuntungan sebagai berikut:.

  • Efek visual dapat ditambahkan dengan mudah.
  • Gambar dapat disesuaikan hanya dengan menggunakan CSS, tanpa perangkat lunak pengedit gambar.
  • Efek dinamis dapat dibuat dengan mengkombinasikan dengan animasi.

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

Properti transform digunakan untuk menerapkan transformasi 2D atau 3D pada elemen. Berbagai transformasi visual seperti posisi, rotasi, skala (perbesar/perkecil), dan kemiringan dapat ditentukan dengan menggunakan CSS. Properti transform sering digunakan dalam kombinasi dengan animasi dan membantu dalam menciptakan elemen UI yang dinamis.

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

  • Dalam kelas transform-skew, melayang di atas elemen akan memutarnya sebesar 30 derajat pada sumbu X dan 20 derajat pada sumbu Y.

  • Dalam kelas transform-rotate, melayang di atas elemen akan memutarnya sebesar 45 derajat dan memperbesarnya 1,5 kali.

Sintaks Dasar 

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

Properti transform menentukan baik none atau transform-function.

  • Jika none ditentukan, tidak ada transformasi yang akan diterapkan.
  • Tentukan jenis transformasi dengan <transform-function>. Beberapa transformasi dapat diterapkan dengan memisahkannya menggunakan spasi.

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) memindahkan elemen sejauh jarak yang ditentukan sepanjang sumbu X dan Y. Tentukan x dan y menggunakan unit seperti px atau %. Anda juga dapat menentukan secara terpisah dengan translateX() atau translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • Fungsi rotate(angle) memutar elemen sesuai sudut yang ditentukan dalam derajat (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) mengubah ukuran elemen sepanjang sumbu X dan Y. x dan y adalah faktor skala relatif terhadap ukuran asli. Sebagai contoh, scale(2, 2) akan menggandakan ukurannya. Anda dapat menentukan secara terpisah 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) memiringkan elemen sesuai sudut yang ditentukan sepanjang sumbu X dan Y. Anda dapat menentukan secara terpisah 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 beberapa transformasi sekaligus. Fungsi ini biasanya digunakan dalam kombinasi dengan fungsi transformasi lainnya.

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.
    • Fungsi ini dapat ditentukan dalam tiga dimensi: sumbu X, Y, dan Z.
  • Dengan mengatur properti transform-style ke preserve-3d dan properti perspective ke 600px, efek pergerakan tiga dimensi dengan kedalaman diterapkan 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 rotasi dalam ruang 3D.
    • Fungsi ini memutar elemen sehubungan dengan sumbu X, Y, dan Z.

Menggabungkan beberapa transformasi 

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

Properti transform dapat menerapkan beberapa transformasi secara bersamaan. Sebagai contoh, Anda dapat menggabungkan rotasi dan skala.

Poin Penting untuk Penggunaan

Properti transform adalah alat yang kuat dalam CSS untuk secara visual mengubah elemen. Dengan menggabungkan berbagai fungsi, Anda dapat menciptakan antarmuka pengguna yang interaktif dan dinamis.

  • Properti transform memungkinkan transformasi langsung pada elemen, memungkinkan manipulasi visual tanpa mengubah tata letak DOM.
  • Hal ini sangat berguna untuk menciptakan animasi dan elemen interaktif, memungkinkan desain dinamis ketika digabungkan dengan transition atau animation.

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

Properti transform-origin digunakan untuk menetapkan titik asal bagi transformasi yang diterapkan oleh properti transform. Anda dapat menentukan titik referensi untuk transformasi elemen, memungkinkan Anda mengontrol posisi efek seperti rotasi atau skala diterapkan.

Dalam contoh ini, ketika Anda menunjuk elemen dengan mouse, elemen akan berotasi dan berskala secara bersamaan berdasarkan titik yang ditentukan oleh properti transform-origin.

Sintaks Dasar 

1transform-origin: x y z;

Untuk properti transform-origin, Anda menetapkan x, y, dan z seperti ini.

  • Untuk x, tentukan titik referensi pada sumbu X (arah horizontal). Nilai dapat ditentukan dengan menggunakan kata kunci (left, center, right) atau ukuran (px, %, dll.).
  • Untuk y, tentukan titik referensi pada sumbu Y (arah vertikal). Nilai dapat ditentukan dengan menggunakan kata kunci (top, center, bottom) atau ukuran.
  • Untuk z, tentukan titik referensi pada sumbu Z (arah kedalaman). Ini hanya dapat digunakan dengan transformasi 3D. Ini opsional, dan nilai defaultnya adalah 0.

Nilai Default 

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

Nilai default untuk properti transform-origin adalah pusat elemen untuk sumbu X dan Y. Ini berarti bahwa, secara default, transformasi dilakukan dengan pusat elemen sebagai titik referensi.

Cara Menentukan Nilai

Nilai untuk properti transform-origin dapat ditentukan menggunakan kata kunci, persentase, ukuran seperti px, em, dll.

  1. Spesifikasi Kata Kunci

    • left: Menetapkan referensi sumbu X ke tepi kiri elemen.
    • right: Menetapkan referensi sumbu X ke tepi kanan elemen.
    • top: Menetapkan referensi sumbu Y ke tepi atas elemen.
    • bottom: Menetapkan referensi sumbu Y ke tepi bawah elemen.
    • center: Menetapkan referensi untuk sumbu X atau Y ke tengah elemen.

  2. Spesifikasi Persentase

    • 0%: Menetapkannya di tepi kiri atau atas.
    • 50%: Menetapkannya di tengah.
    • 100%: Menetapkannya di tepi kanan atau bawah.

  3. Spesifikasi Panjang

    • Anda dapat menyesuaikan titik referensi secara detail menggunakan panjang spesifik seperti px, em, dll.

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 dapat digunakan untuk transformasi 3D. Dalam transformasi 3D, Anda juga dapat menentukan titik referensi pada sumbu Z. Misalnya, dengan menentukan pusat rotasi dalam arah kedalaman, transformasi dengan kesan kedalaman dapat dilakukan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS yang terkait dengan transparansi