Articles
Panimula sa CSS
Mga Katangian ng CSS na Kaugnay sa Mga Epekto ng Filter

Mga Katangian ng CSS na Kaugnay sa Mga Epekto ng Filter

Ipinaliliwanag ng artikulong ito ang mga katangian ng CSS na may kaugnayan sa mga epekto ng filter.

Matututo ka tungkol sa mga gamit at kung paano isusulat ang mga katangian tulad ng filter at transform.

YouTube Video

HTML para sa Preview

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>

Mga Epekto ng Filter

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

Ginagamit ang katangiang filter upang maglapat ng mga biswal na epekto sa mga elemento. Madali kang maaaring magdagdag ng iba't ibang epekto tulad ng paglalabo ng mga larawan o elemento, pag-aayos ng liwanag, at pagbabago ng contrast.

  • May sepia effect ang filtered-image-sepia na klase.
  • May opacity effect ang filtered-image-opacity na klase.
  • May brightness, contrast, at sepia effects ang filtered-image-multiple na klase na inilapat sa larawan.

Pangunahing Syntax 

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

Para sa katangiang filter, tukuyin ang none o isang filter-function.

  • Kapag tinukoy ang none, walang mga filter effects ang inilalapat.
  • Tukuyin ang filter function na ilalapat sa <filter-function>. Maaaring magtakda ng maramihang filters sa pamamagitan ng paglalagay ng espasyo sa pagitan ng mga ito.

Mga Uri ng Filter Function

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

Ang blur() function ay naglalapat ng blur na epekto.

  • Itinatakda ang halaga sa pixels (px), at mas malaki ang halaga, mas malakas ang antas ng blur.
brightness() 
1filter: brightness(1.5);

Inaayos ng brightness() function ang liwanag.

  • Ang halaga ay itinatakda batay sa 0 (lubos na madilim) hanggang 1 (unang liwanag). Kapag nagtakda ng halaga na mas mataas sa 1, mas nagiging maliwanag ang elemento.
contrast() 
1filter: contrast(2);

Ipinapagawa ng contrast() function ang contrast.

  • Ang halaga ay itinatakda batay sa 0 (grayscale) hanggang 1 (unang contrast), at pinapalawak ang contrast kapag higit sa 1.
grayscale() 
1filter: grayscale(1);

Ang grayscale() function ay nagko-convert sa elemento upang maging monochrome.

  • Ang halaga ay tinutukoy mula 0 (orihinal na kulay) hanggang 1 (ganap na monochrome).
hue-rotate() 
1filter: hue-rotate(90deg);

Ang hue-rotate() na function ay umiikot ng hue.

  • Ang mga halaga ay tinutukoy sa mga degree (deg), at binabago ang kulay sa pamamagitan ng pag-ikot ng hue. Ang hue ay umiikot sa saklaw mula 0deg hanggang 360deg.
invert() 
1filter: invert(1);

Ang invert() na function ay binabago ang mga kulay.

  • Ang mga halaga ay tinutukoy mula 0 (orihinal na kulay) hanggang 1 (ganap na baligtad na kulay).
opacity() 
1filter: opacity(0.5);

Ang opacity() na function ay nagbabago sa transparency ng isang elemento.

  • Ang mga halaga ay tinutukoy sa saklaw mula 0 (ganap na transparent) hanggang 1 (hindi transparent).
saturate() 
1filter: saturate(2);

Ang saturate() na function ay inaayos ang saturation.

  • Ang mga halaga ay nasa saklaw mula 0 (monochrome) hanggang 1 (orihinal na saturation), at ang pagsasaad ng halaga na higit sa 1 ay nagpapahusay ng saturation.
sepia() 
1filter: sepia(1);

Ang sepia() na function ay nagko-convert sa sepia tone.

  • Ang mga halaga ay tinutukoy mula 0 (orihinal na kulay) hanggang 1 (ganap na sepia tone).

Paglalapat ng Maramihang Mga Filter 

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

Puwedeng mag-aplay ng maramihang mga filter na pinaghiwalay ng mga puwang.

Mga Bentahe sa Paggamit ng filter na Property

Ang filter na property ay isang makapangyarihang kasangkapan para madaling makalikha ng mga aesthetically pleasing na elemento. Mayroon itong mga sumusunod na bentahe:.

  • Ang mga visual na epekto ay madaling maidagdag.
  • Ang mga imahe ay puwedeng i-adjust gamit lamang ang CSS, nang hindi kinakailangan ng software sa pag-edit ng larawan.
  • Puwedeng lumikha ng dinamikong mga epekto sa pamamagitan ng pagsasama sa mga animation.

transform na Property 

 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}

Ang transform na property ay ginagamit upang mag-aplay ng 2D o 3D na mga transformasyon sa mga elemento. Iba’t ibang visual na transformasyon tulad ng posisyon, pag-ikot, pagpapalawak/pagpapaliit (scaling), at pagbaluktot (skewing) ay maaaring tukuyin gamit ang CSS. Ang transform na property ay kadalasang ginagamit kasabay ng mga animation at nakakatulong sa paggawa ng mga dinamikong elemento ng UI.

  • Sa klase na transform-scale, kapag hinovor sa elemento, pinapalaki nito ang lapad nang 1.5 beses at ang taas nang 2 beses.

  • Sa klase na transform-skew, kapag hinovor sa elemento, iniikot ito ng 30 degrees sa X-axis at 20 degrees sa Y-axis.

  • Sa klase na transform-rotate, kapag hinovor sa elemento, iniikot ito ng 45 degrees at pinapalaki ito ng 1.5 beses.

Pangunahing Syntax 

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

Ang property na transform ay tumutukoy sa none o isang transform-function.

  • Kung none ang tinukoy, walang transformation na ipapatupad.
  • Tukuyin ang uri ng transformation gamit ang <transform-function>. Pwedeng mag-apply ng maraming transformation sa pamamagitan ng paghihiwalay sa mga ito gamit ang espasyo.

Pangunahing Mga Function ng Transformation

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 */
  • Ang function na translate(x, y) ay inililipat ang isang elemento ayon sa mga tinukoy na distansya sa X at Y axes. Tukuyin ang x at y gamit ang mga unit gaya ng px o %. Maaari ring tukuyin nang isa-isa gamit ang translateX() o translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • Ang function na rotate(angle) ay iniikot ang isang elemento ayon sa tinukoy na anggulo sa degrees (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 */
  • Ang function na scale(x, y) ay nilalapat ang scaling ng elemento sa X at Y axes. x at y ay mga scale factor na kaugnay ng orihinal na sukat. Halimbawa, ang scale(2, 2) ay dodoblehin ang sukat. Maaari ring tukuyin nang isa-isa gamit ang scaleX() o 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);
  • Ang function na skew(x-angle, y-angle) ay inihihilig ang isang elemento gamit ang mga tinukoy na anggulo sa X at Y axes. Maaari ring tukuyin nang isa-isa gamit ang skewX() o skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • Ang function na matrix() ay tumutukoy sa isang matrix para pagsamahin ang maraming transformation nang sabay-sabay. Karaniwan itong ginagamit kasabay ng iba pang transformation functions.

Mga 3D na function ng transformation

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;
  • Ang function na translate3d() ay gumaganap ng translation sa 3D na espasyo.
    • Maaari itong tukuyin sa tatlong dimensyon: X, Y, at Z axes.
  • Sa pamamagitan ng pagtatakda ng property na transform-style sa preserve-3d at ng property na perspective sa 600px, ang mga child element ay magkakaroon ng tatlong-dimensional na epekto ng paggalaw na may lalim.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • Ang function na rotate3d() ay gumaganap ng pag-ikot sa 3D na espasyo.
    • Iniikot nito ang isang elemento kaugnay ng X, Y, at Z axes.

Pagsasama-sama ng maraming pagbabagong-anyo 

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

Ang katangiang transform ay maaaring maglapat ng maraming pagbabagong-anyo nang sabay-sabay. Halimbawa, maaari mong pagsamahin ang pag-ikot at sukat.

Mahahalagang Punto sa Paggamit

Ang katangiang transform ay isang makapangyarihang kasangkapan sa CSS para sa visual na pagbabagong-anyo ng mga elemento. Sa pamamagitan ng pagsasama-sama ng iba't ibang mga function, maaari kang lumikha ng mga interactive at dynamic na UI.

  • Ang katangiang transform ay nagbibigay-daan sa direktang pagbabagong-anyo ng mga elemento, na nagbibigay ng visual na pagmamanipula nang hindi binabago ang layout ng DOM.
  • Napakalaking tulong nito sa paglikha ng mga animasyon at interactive na mga elemento, na nagbibigay-daan sa mga dynamic na disenyo kapag pinagsama sa transition o animation.

transform-origin na katangian 

 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}

Ang katangiang transform-origin ay ginagamit upang itakda ang pinanggagalingan ng mga pagbabagong-anyo na inilapat ng transform na katangian. Maaari mong tukuyin ang reference point para sa mga pagbabagong-anyo ng elemento, na nagbibigay sa iyo ng kontrol kung aling posisyon ang iikot o magbabago sa sukat.

Sa halimbawang ito, kapag itinapat mo ang mouse sa elemento, ito ay umiikot at sabay na nagbabago sa sukat batay sa puntong itinakda ng transform-origin na katangian.

Pangunahing Syntax 

1transform-origin: x y z;

Para sa katangiang transform-origin, maaari mong tukuyin ang x, y, at z nang ganito.

  • Para sa x, tukuyin ang reference point sa X-axis (pahalang na direksyon). Maaaring tukuyin ang mga halaga gamit ang mga keyword (left, center, right) o mga haba (px, % atbp.).
  • Para sa y, tukuyin ang reference point sa Y-axis (patayong direksyon). Maaaring tukuyin ang mga halaga gamit ang mga keyword (top, center, bottom) o mga haba.
  • Para sa z, tukuyin ang reference point sa Z-axis (direksyong lalim). Maaari lamang itong gamitin sa 3D na pagbabagong-anyo. Opsyonal ito, at ang default ay 0.

Default na Halaga 

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

Ang default na halaga para sa katangiang transform-origin ay ang gitna ng elemento para sa parehong X at Y na mga axis. Ibig sabihin nito, sa default, ang mga pagbabagong-anyo ay ginagawa gamit ang gitna ng elemento bilang reference point.

Paano I-tukoy ang Mga Halaga

Ang mga halaga para sa katangiang transform-origin ay maaaring tukuyin gamit ang mga keyword, porsyento, o haba tulad ng px, em, atbp.

  1. Pagtukoy ng Keyword

    • left: Itinatakda ang reference ng X-axis sa kaliwang gilid ng elemento.
    • right: Itinatakda ang reference ng X-axis sa kanang gilid ng elemento.
    • top: Itinatakda ang reference ng Y-axis sa tuktok na gilid ng elemento.
    • bottom: Itinatakda ang reference ng Y-axis sa ibabang gilid ng elemento.
    • center: Itinatakda ang reference para sa X o Y axis sa gitna ng elemento.

  2. Pagtukoy ng Porsyento

    • 0%: Itinatakda ito sa kaliwa o tuktok na gilid.
    • 50%: Itinatakda ito sa gitna.
    • 100%: Itinatakda ito sa kanan o ibabang gilid.

  3. Pagtukoy ng Haba

    • Maaari mong maayos na i-adjust ang reference point gamit ang tiyak na mga haba tulad ng px, em, atbp.

transform-origin sa 3D Transformations 

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}

Ang transform-origin ay maaari ding gamitin para sa 3D transformations. Sa 3D transformations, maaari mo ring tukuyin ang reference point sa Z-axis. Halimbawa, sa pagtukoy ng gitna ng pag-ikot sa direksyon ng lalim, posible ang mga transformations na may pakiramdam ng lalim.

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

Mga katangian ng CSS na may kaugnayan sa transparency