Properti CSS yang terkait dengan transparansi

Articles

Artikel ini menjelaskan properti CSS yang terkait dengan transparansi.

Anda dapat mempelajari penggunaan dan sintaks properti opacity, z-index, dan clip-path.

YouTube Video

HTML untuk Pratinjau

css-opacity.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-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

Efek Filter

Properti `opacity`

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

Properti opacity digunakan untuk mengatur transparansi sebuah elemen. Properti ini menentukan opasitas seluruh elemen, dengan nilai yang mendekati 0 lebih transparan dan nilai yang mendekati 1 lebih buram. Properti opacity dapat dikombinasikan dengan animasi untuk membuat efek pudar masuk dan pudar keluar.

Properti opacity memengaruhi tidak hanya elemen yang diaturnya tetapi juga elemen anaknya. Ini berarti bahwa jika elemen induk diatur menjadi semi-transparan, elemen anaknya akan mewarisi transparansi tersebut.

Dalam contoh ini, pengaturannya dikonfigurasi sebagai berikut.

Jika properti opacity diatur ke 1, elemen akan sepenuhnya buram, seperti elemen biasa.
Jika properti opacity diatur ke 0.5, elemen menjadi setengah transparan.
Jika properti opacity diatur ke 1, elemen menjadi sepenuhnya transparan dan sama sekali tidak terlihat.
Properti transition diatur ke opacity, sehingga ketika kursor mouse mengarah ke elemen, elemen tersebut secara perlahan memudar dan menjadi sepenuhnya transparan setelah 2 detik.
Jika elemen induk memiliki properti opacity sebesar 0.5, maka elemen anak juga akan menjadi setengah transparan.

Properti `z-index`

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

Properti z-index digunakan dalam CSS untuk mengontrol urutan tumpukan elemen. Properti ini menentukan apakah sebuah elemen harus muncul di depan atau di belakang elemen lain.

Pada kotak merah, z-index diatur ke 1, sehingga elemen tersebut muncul di depan elemen lainnya.
Pada kotak biru, z-index diatur ke 0, sehingga elemen tersebut muncul di belakang kotak merah.
Pada kotak hijau, z-index diatur ke 2, dan elemen tersebut muncul di posisi paling depan.
Pada kotak biru muda, z-index tertinggi yaitu 4 sudah ditentukan, namun karena elemen induknya memiliki z-index sebesar 0, maka elemen tersebut tidak muncul di posisi paling depan.

Mekanisme Dasar

Properti z-index menerima nilai numerik, di mana elemen dengan angka lebih tinggi ditampilkan di depan elemen dengan angka lebih kecil. Secara default, elemen tanpa z-index yang ditentukan akan ditumpuk sesuai dengan urutan kemunculannya di HTML.

Namun, agar z-index dapat berfungsi, properti position elemen harus diatur ke relative, absolute, fixed, atau sticky. Jika position adalah static, maka z-index tidak memiliki efek.

Nilai

Jika angka positif diberikan pada z-index, elemen akan ditampilkan lebih ke depan. Semakin besar angkanya, semakin elemen ditampilkan di depan elemen lainnya.
- Jika z-index diatur ke 0, elemen akan mempertahankan urutan lapisan default.
- Jika z-index diatur ke 1, elemen akan ditampilkan satu lapisan di depan elemen lainnya.
Jika angka negatif diberikan pada z-index, elemen akan ditampilkan lebih ke belakang. Semakin kecil angkanya, semakin elemen ditampilkan di belakang elemen lainnya.
- Jika z-index diatur ke -1, elemen akan ditampilkan satu lapisan di belakang elemen lainnya.

Catatan

z-index tergantung pada z-index elemen induknya. Ketika elemen induk memiliki nilai z-index yang ditentukan, urutan lapisan relatif di dalam elemen induk tersebut akan diterapkan. Ini disebut sebagai konteks lapisan (stacking context). Oleh karena itu, meskipun elemen anak memiliki z-index yang tinggi, jika z-index elemen induknya rendah, elemen tersebut tidak akan muncul di depan elemen lainnya.

Properti `clip-path`

CSS clip-path adalah properti yang digunakan untuk memotong elemen menjadi bentuk tertentu. Biasanya, elemen ditampilkan sebagai kotak persegi panjang, tetapi dengan clip-path, elemen dapat ditampilkan dalam bentuk kompleks seperti lingkaran atau poligon. Ini adalah alat yang sangat berguna untuk membuat desain visual atau efek interaktif.

Properti clip-path membatasi area tampilan dari sebuah elemen dan menyembunyikan bagian-bagian di luar bentuk yang ditentukan. Selanjutnya, kami akan menjelaskan bagaimana menentukan bentuk yang umum digunakan.

Bentuk Pemotongan Utama

`circle()`

1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

circle() memotong elemen menjadi bentuk lingkaran. Anda dapat mengontrol bentuknya dengan menentukan pusat dan radius lingkaran.

50% pertama adalah radius lingkaran (sebagai persentase dari lebar atau tinggi elemen).
at 50% 50% berikutnya adalah posisi pusat lingkaran (sebagai persentase dari lebar dan tinggi elemen).

Di sini, lingkaran ditentukan dengan radius setengah dari dimensi elemen, yang berada di tengah elemen.

`ellipse()`

1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

ellipse() memotong elemen menjadi bentuk elips. Anda menentukan jari-jari lebar dan tinggi, serta posisi pusatnya.

50% 30% pertama adalah jari-jari lebar dan tinggi.
at 50% 50% berikutnya adalah posisi pusat dari elips.

Dalam contoh ini, elips ditentukan berada di tengah elemen, dengan lebar 50% dan tinggi 30%.

`polygon()`

1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() membentuk poligon dengan menghubungkan serangkaian titik yang ditentukan. Setiap titik ditentukan dengan koordinat relatif dalam elemen.

Dalam contoh ini, tiga titik ditentukan (pusat atas, kanan bawah, kiri bawah) dan dipotong menjadi segitiga. polygon() sangat fleksibel dan dapat membuat berbagai bentuk.

`inset()`

1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

inset() memotong ke dalam dari tepi luar elemen. Tetapkan sebuah persegi panjang dengan menentukan jarak dari masing-masing keempat sisi.

10% adalah jarak dari tepi atas.
20% adalah jarak dari tepi kanan.
30% adalah jarak dari tepi bawah.
40% adalah jarak dari tepi kiri.

Spesifikasi ini menciptakan sebuah persegi panjang yang menyusut ke dalam elemen.

`clip-path` menggunakan SVG

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

CSS clip-path dapat menggunakan tidak hanya bentuk primitif tetapi juga memotong bentuk kompleks menggunakan elemen <clipPath> SVG.

Dalam contoh ini, path klip berbentuk lingkaran yang didefinisikan dalam SVG dengan id myClip diterapkan pada elemen HTML.

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

YouTube Video

`object-fit` dan Properti `object-position`Properti CSS Terkait Efek Filter

Properti CSS yang terkait dengan transparansi

YouTube Video

HTML untuk Pratinjau

Efek Filter

Properti opacity

Properti z-index

Mekanisme Dasar

Nilai

Catatan

Properti clip-path

Bentuk Pemotongan Utama

circle()

ellipse()

polygon()

inset()

clip-path menggunakan SVG

YouTube Video

Properti `opacity`

Properti `z-index`

Properti `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` menggunakan SVG