Mga katangian ng CSS na may kaugnayan sa transparency

Articles

Ipinaliwanag ng artikulong ito ang mga katangian ng CSS na may kaugnayan sa transparency.

Maaari mong matutunan ang paggamit at syntax ng mga katangiang opacity, z-index, at clip-path.

YouTube Video

HTML para sa Preview

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>

Mga Epekto ng Filter

Katangiang `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}

Ginagamit ang katangiang opacity upang itakda ang transparency ng isang elemento. Tinutukoy ng katangiang ito ang opacity ng buong elemento, kung saan ang mga halagang mas malapit sa 0 ay mas transparent at ang mga halagang malapit sa 1 ay mas opaque. Maaaring pagsamahin ang katangiang opacity sa mga animation upang makagawa ng fade-in at fade-out na mga epekto.

Ang katangiang opacity ay nakakaapekto hindi lamang sa elementong pinaglagyan nito kundi pati na rin sa mga elemento ng anak nito. Ibig sabihin nito, kung ang isang parent na elemento ay itinakda bilang semi-transparent, ang mga elemento ng anak nito ay magmamana rin ng transparency na iyon.

Sa halimbawang ito, ang mga setting ay nakaayos ng ganito.

Kapag ang opacity property ay nakatakda sa 1, ang elemento ay ganap na hindi transparent, katulad ng isang normal na elemento.
Kapag ang opacity property ay nakatakda sa 0.5, ang elemento ay nagiging bahagyang transparent.
Kapag ang opacity property ay nakatakda sa 0, ang elemento ay nagiging ganap na transparent at hindi na nakikita.
Ang transition property ay nakatakda sa opacity, kaya kapag ang mouse cursor ay lumutang sa ibabaw ng elemento, ito ay unti-unting nawawala at nagiging ganap na transparent pagkatapos ng 2 segundo.
Kung ang parent element ay may opacity property na 0.5, ang mga child element ay nagiging bahagyang transparent din.

Katangiang `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}

Ang z-index ay isang katangian na ginagamit sa CSS upang kontrolin ang stacking order ng mga elemento. Tinutukoy ng katangiang ito kung ang isang elemento ay dapat lumitaw sa unahan o likuran ng iba pang mga elemento.

Sa pulang kahon, ang z-index ay nakatakda sa 1, kaya ang elemento ay lumalabas sa harap ng ibang mga elemento.
Sa asul na kahon, ang z-index ay nakatakda sa 0, kaya ang elemento ay lumalabas sa likod ng pulang kahon.
Sa berdeng kahon, ang z-index ay nakatakda sa 2, at ito ay lumalabas sa pinakaharap na posisyon.
Sa maliwanag na asul na kahon, ang pinakamataas na z-index na 4 ay itinakda, ngunit dahil ang parent element ay may z-index na 0, hindi ito lumalabas sa pinakaharap na posisyon.

Pangunahing Mekanismo

Ang katangiang z-index ay tumatanggap ng numerikal na halaga, kung saan ang mga elemento na may mas mataas na numero ay ipinapakita sa harap ng mga may mas mababang numero. Sa default, ang mga elemento na walang nakatakdang z-index ay nakaayos ayon sa pagkakasunod-sunod ng kanilang pagpapakita sa HTML.

Gayunpaman, upang magkabisa ang z-index, kailangang itakda ang katangian ng position ng elemento bilang relative, absolute, fixed, o sticky. Kung ang position ay static, walang epekto ang z-index.

Mga Halaga

Kung ang z-index ay binigyan ng positibong integer, ang elemento ay mas ipinapakita sa harap. Kapag mas malaki ang numero, mas ipinapakita ito sa harap ng ibang mga elemento.
- Kung ang z-index ay nakatakda sa 0, pinapanatili nito ang default na pagkakaayos.
- Kung ang z-index ay nakatakda sa 1, ang elemento ay ipinapakita ng isang layer sa harap ng ibang mga elemento.
Kung ang z-index ay binigyan ng negatibong integer, ang elemento ay mas ipinapakita sa likuran. Kapag mas maliit ang numero, mas ipinapakita ito sa likod ng ibang mga elemento.
- Kung ang z-index ay nakatakda sa -1, ang elemento ay ipinapakita ng isang layer sa likod ng ibang mga elemento.

Mga Tala

Ang z-index ay nakadepende sa z-index ng parent na elemento. Kapag ang parent na elemento ay may nakatakdang z-index, ang relatibong pagkakaayos ng stacking sa loob ng parent na elemento ay ginagamit. Ito ay tinatawag na stacking context. Samakatuwid, kahit ang child na elemento ay may mataas na z-index, kung ang z-index ng parent na elemento ay mababa, hindi ito lalabas sa harap ng ibang mga elemento.

Ang Katangiang `clip-path`

Ang clip-path sa CSS ay isang katangiang ginagamit upang i-clip ang mga elemento sa tiyak na mga hugis. Karaniwan, ang mga elemento ay ipinapakita bilang mga rektanggulong kahon, ngunit sa pamamagitan ng clip-path, ang mga elemento ay maaaring ipakita sa mas komplikadong mga hugis tulad ng bilog o poligon. Ito ay isang napaka-kapaki-pakinabang na kasangkapan para sa paggawa ng mga visual na disenyo o mga interaktibong epekto.

Ang katangiang clip-path ay nililimitahan ang display na lugar ng isang elemento at itinatago ang mga bahagi sa labas ng tinukoy na hugis. Susunod, ipapaliwanag namin kung paano tukuyin ang mga karaniwang ginagamit na hugis.

Pangunahing Mga Hugis ng Pagkaka-clip

`circle()`

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

Ang circle() ay nagkaka-clip ng elemento sa bilog na hugis. Maaari mong kontrolin ang hugis sa pamamagitan ng pagtukoy sa sentro at radius ng bilog.

Ang unang 50% ay ang radius ng bilog (bilang porsyento ng lapad o taas ng elemento).
Ang kasunod na at 50% 50% ay ang posisyon ng sentro ng bilog (bilang porsyento ng lapad at taas ng elemento).

Dito, tinutukoy nito ang isang bilog na may radius na kalahati ng mga sukat ng elemento, nakasentro sa elemento.

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

Ang ellipse() ay pinuputol ang isang elemento upang maging hugis-elliptical. Itinatakda mo ang mga radius ng lapad at taas, pati na rin ang posisyon ng sentro.

Ang unang 50% 30% ay ang mga radius ng lapad at taas.
Ang kasunod na at 50% 50% ay ang posisyon ng sentro ng ellipse.

Sa halimbawang ito, tinutukoy nito ang isang ellipse na nakasentro sa elemento, na may lapad na 50% at taas na 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}

Ang polygon() ay bumubuo ng isang poligon sa pamamagitan ng pagkonekta ng tinukoy na hanay ng mga vertex. Ang bawat vertex ay itinatakda gamit ang mga kamag-anak na coordinate sa loob ng elemento.

Sa halimbawang ito, tinutukoy nito ang tatlong vertex (itaas na gitna, ibabang kanan, ibabang kaliwa) at ginagawang tatsulok. Ang polygon() ay napaka-flexible at maaaring lumikha ng anumang hugis.

`inset()`

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

Ang inset() ay pumuputol papaloob mula sa panlabas na mga gilid ng isang elemento. Magtukoy ng rektanggulo sa pamamagitan ng pagtukoy sa distansya mula sa bawat isa sa apat na gilid.

Ang 10% ay ang distansya mula sa itaas na gilid.
Ang 20% ay ang distansya mula sa kanang gilid.
Ang 30% ay ang distansya mula sa ibabang gilid.
Ang 40% ay ang distansya mula sa kaliwang gilid.

Ang spesipikasyong ito ay lumilikha ng isang rektanggulo na lumiliit sa loob ng elemento.

`clip-path` gamit ang 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}

Ang CSS clip-path ay maaaring gamitin hindi lamang ang mga simpleng hugis kundi pati na rin ang mga komplikadong hugis gamit ang isang SVG <clipPath> na elemento.

Sa halimbawang ito, isang bilog na clip path na tinukoy sa SVG na may id na myClip ay inilapat sa isang HTML element.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

`object-fit` at `object-position` na mga Katangian Mga Katangian ng CSS na Kaugnay sa Mga Epekto ng Filter

Mga katangian ng CSS na may kaugnayan sa transparency

YouTube Video

HTML para sa Preview

Mga Epekto ng Filter

Katangiang opacity

Katangiang z-index

Pangunahing Mekanismo

Mga Halaga

Mga Tala

Ang Katangiang clip-path

Pangunahing Mga Hugis ng Pagkaka-clip

circle()

ellipse()

polygon()

inset()

clip-path gamit ang SVG

YouTube Video

Katangiang `opacity`

Katangiang `z-index`

Ang Katangiang `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` gamit ang SVG