Articles
Panimula sa CSS
Mga Katangian ng CSS na Kaugnay sa User Interface

Mga Katangian ng CSS na Kaugnay sa User Interface

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

Maaari mong matutunan ang tungkol sa mga katangiang content, cursor, pointer-events, at resize, kabilang ang kanilang mga gamit at kung paano isulat ang mga ito.

YouTube Video

HTML para sa Preview

css-ui.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-ui.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>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</html>

Kaugnay sa User Interface

Ari-arian ng content 

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

Ang ari-arian ng content ay ginagamit upang magdagdag ng nilalaman sa mga pseudo-elemento, karamihan sa ::before o ::after. Ang ari-arian na ito ay ginagamit upang tukuyin ang teksto, mga imahe, mga counter, at iba pa, na hindi direktang ipinapakita sa loob ng elemento. Ang pangunahing layunin nito ay payagan ang pagkontrol ng dekoratibong nilalaman o karagdagang impormasyon na hindi direktang isinusulat sa HTML gamit ang mga stylesheet.

Sa halimbawa na ito, "Note: " ay dinagdag bago ang elemento, at "(End)" ay idinagdag pagkatapos. Ginagamit ng mga ito ang pseudo-elements na ::before at ::after ayon sa pagkakabanggit.

Mga halaga ng ari-arian ng content 

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

Ang ari-arian ng content ay maaaring tumanggap ng sumusunod na mga halaga:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}
  • Teksto
    • Maaari kang magdagdag ng teksto sa pamamagitan ng paglalagay ng string sa loob ng double quotes ("").
1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}
  • Larawan
    • Maaari kang maglagay ng larawan gamit ang url() na function.
 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}
  • Counter
    • Gamitin ang counter() na function para magpakita ng counter.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Atributo
    • Maaaring gamitin ang attr() na function upang ipakita ang halaga ng attribute ng isang HTML elemento. Halimbawa, maaari mong ipakita ang katangian na title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • wala
    • Nagtatakda na walang nilalaman na ipapakita. Ito ang default na estado.

Mga Tala sa Paggamit

Kapag gumagamit ng content na property, tandaan ang mga sumusunod na punto:.

  • Ang ari-arian ng content ay para lamang sa mga pseudo-elemento, hindi sa mga regular na elemento.
  • Dahil hindi ito idinaragdag sa DOM, hindi ito maaaring direktang manipulahin gamit ang JavaScript.
  • Maaaring makaapekto ito sa layout, kaya't karaniwang ginagamit ito upang magpakita ng dekoratibo o karagdagang impormasyon.

Katangiang cursor

Ang katangiang cursor ay ginagamit upang tukuyin ang uri ng cursor na ipapakita kapag inilagay ang pointer ng mouse sa isang elemento. Maaari mong tukuyin ang iba't ibang estilo ng cursor, at kalimitang inilalapat ito sa mga interactive na elemento upang mapabuti ang karanasan ng user.

Pangunahing Uri ng Cursor

Ang mga sumusunod na halaga ay maaaring tukuyin bilang mga uri ng cursor:.

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }
default
  • Ang default ay ang normal na arrow cursor (ang default na cursor ng browser).
pointer
  • Ang pointer ay isang hand-shaped cursor na ipinapakita kapag inilagay sa isang link.
text
  • Ang text ay isang I-beam cursor na ipinapakita sa mga lugar kung saan maaaring pumili ng teksto.
move 
- Ang `move` ay isang cross-shaped cursor na ginagamit kapag maaaring i-drag ang isang elemento.
crosshair
  • Ang crosshair ay isang crosshair cursor para sa tumpak na pagpili.
not-allowed
  • Ang not-allowed ay isang cursor para sa mga rehiyon o aksyon na hindi pinapayagan.
help
  • Ang help ay isang cursor na may tandang pananong na ipinapakita kapag inilagay sa mga elemento na maaaring magbigay ng impormasyon sa tulong.
wait
  • Ang wait ay isang hourglass o bilog na cursor na kumakatawan sa estado ng pagpoproseso.
progress
  • Ang progress ay isang cursor na kumakatawan sa isang operasyong isinasagawa. Gayunpaman, ipinapakita nito na maaaring magsagawa ng ibang mga operasyon ang gumagamit.
grab
  • Ang grab ay isang cursor para sa pagkuha ng mga elemento na maaaring i-drag.
grabbing
  • Ang grabbing ay isang cursor na nagpapahiwatig na ang isang elemento ay kasalukuyang niyuyugyog.
resize

Ang resize ay isang cursor na ginagamit kapag maaaring baguhin ang laki ng isang window o elemento. Mayroong iba't ibang uri depende sa direksyon.

  • n-resize: Isang cursor ng pagbabago ng laki na nakaturo pataas.

  • s-resize: Isang cursor ng pagbabago ng laki na nakaturo pababa.

  • e-resize: Isang cursor ng pagbabago ng laki na nakaturo sa kanan.

  • w-resize: Isang cursor ng pagbabago ng laki na nakaturo sa kaliwa.

  • ne-resize: Isang cursor ng pagbabago ng laki na nakaturo sa kanang itaas.

  • nw-resize: Isang cursor ng pagbabago ng laki na nakaturo sa kaliwang itaas.

  • se-resize: Isang cursor ng pagbabago ng laki na nakaturo sa kanang ibaba.

  • sw-resize: Isang cursor ng pagbabago ng laki na nakaturo sa kaliwang ibaba.

Pasadyang cursor 

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

Posible rin na tukuyin ang pasadyang cursor gamit ang url().

  • Sa halimbawang ito, ang custom-cursor.png ay ang file ng larawan para sa cursor. Kung hindi magagamit ang imaheng iyon, ipinapakita ng browser ang default na cursor nito gamit ang auto.

Buod

  • Itinatakda ng cursor property kung anong cursor ang dapat ipakita kapag ang user ay nasa ibabaw ng isang elemento.
  • Mayroong iba't ibang estilo ng cursor na magagamit depende sa paggamit, at maaari ring itakda ang mga pasadyang cursor.
  • Sa pamamagitan ng pagpili ng angkop na mga estilo ng cursor ayon sa interaktibong mga elemento at mga limitadong operasyon, maaaring magbigay ng mas user-friendly na UI.

pointer-events na property 

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

Ang pointer-events ay ginagamit upang kontrolin kung paano pinoproseso ng isang elemento ang mga event mula sa pointer devices tulad ng mouse, touch, at stylus. Karaniwan, kapag na-click o hinover ng isang user ang isang elemento, nakakatanggap ito ng pointer events, ngunit maaaring baguhin ang ganitong pag-uugali gamit ang property na ito.

  • Sa pointer-events-auto na klase, ang pointer-events na property ay nakatakda sa auto, na nagpapahintulot sa normal na click at hover events na maproseso. Ang elemento ay maaaring i-click, kaya nagpapakita ito ng mensahe kapag na-click.

  • Sa pointer-events-auto na klase, ang pointer-events na property ay nakatakda sa none, kaya hindi natatanggap ng elemento ang pointer events. Kahit na ang cursor na property ay nakatakda sa pointer, hindi nagbabago ang cursor ng mouse, at ang ibang mga elemento sa ilalim ay nagiging clickable.

Mga Uri ng Halaga

  • Itinatakda ng pointer-events na property kung tumatanggap at kung paano tumatanggap ng pointer events ang isang elemento. Maaari mong tukuyin ang mga sumusunod na halaga.
auto
  • auto ang default na halaga, kung saan normal na tumatanggap ang elemento ng mga pointer na kaganapan.
none
  • Kapag tinukoy ang none, hindi tumatanggap ang elemento ng mga pointer na kaganapan. Hindi pinapagana ng elemento ang mga pakikipag-ugnayan gaya ng pag-click at pag-hover, ngunit ang ibang mga elemento sa ilalim ay maaaring tumanggap ng mga pointer na kaganapan.
visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit 
1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;
  • Ang mga halagang ito ay pangunahing ginagamit para sa mga elemento ng SVG. Ang bawat halaga ay kumokontrol kung ang mga partikular na bahagi ng isang elemento (tulad ng fill, stroke, atbp.) ay tumutugon sa mga pointer na kaganapan. Ito ay hindi karaniwang ginagamit sa mga regular na HTML na elemento.

Mahahalagang Punto sa Paggamit

Narito ang ilang mga halimbawa kung paano gamitin ang property na pointer-events.

  1. Pagpili ng mga elementong nais mong i-disable

    • Ang halaga na none ay kapaki-pakinabang para sa pansamantalang pag-disable ng mga elemento gaya ng mga pindutan o mga link.

  2. Paggamit kasama ng mga overlaid na elemento

    • Kapag naka-set ang property na position sa absolute o ang mga elemento ay naka-layer gamit ang property na z-index, ang pagtatakda ng pointer-events sa none sa pinakamataas na elemento ay nagpapahintulot na ang mga pointer na kaganapan ay pumunta sa elemento sa ilalim.

katangiang resize 

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

Ang katangiang resize ay isa sa mga property ng CSS na tumutukoy kung saang direksyon maaaring baguhin ang sukat ng isang elemento ng gumagamit. Sa pamamagitan ng property na ito, maaari mong pahintulutan ang mga elemento na mabago ang sukat nang patayo o pahalang sa pamamagitan ng pag-drag, o tuluyang i-disable ang pagbabago ng sukat.

Mga Uri ng Halaga

  • Tinutukoy ng resize na property kung saang mga direksyon maaaring baguhin ang laki ng isang elemento. Maaari mong tukuyin ang mga sumusunod na halaga.
both
  • Ang pagtukoy ng both ay nagpapahintulot na mabago ang sukat ng elemento sa parehong patayo at pahalang na mga direksyon.
horizontal
  • Ang pagtukoy ng horizontal ay nagpapahintulot na mabago ang sukat ng elemento sa pahalang na direksyon lamang (lapad).
vertical
  • Ang pagtukoy ng vertical ay nagpapahintulot na mabago ang sukat ng elemento sa patayong direksyon lamang (taas).
none
  • Ang pag-tukoy ng none ay nagdi-disable ng pagbabago ng sukat ng elemento. Ito ang default na halaga.
inherit
  • Ang pagtukoy ng inherit ay magpapamana sa elemento ng halaga ng property na resize mula sa magulang nito.

Mga Tala

  • Upang gawing resizable ang isang elemento, kailangan mong itakda ang property na overflow kasabay ng property na resize. Ang mga resizable na elemento ay maaaring mangailangan ng scrollbars, at karaniwang itinatakda ang overflow: auto.
  • Ang pag-resize ay karaniwang ginagamit sa mga block na elemento tulad ng div at textarea.

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 Kaugnay sa 3D AnimationMga Katangian sa CSS na May Kaugnayan sa Float