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>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</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:.

  • Teksto: Tukuyin nang direkta sa pamamagitan ng pagsasara ng string sa loob ng "". Nagdaragdag ng teksto.
  • Imahe: Gamitin ang url() na function upang magpasok ng mga imahe.
  • Counter: Gamitin ang counter() na function upang ipakita ang mga counter.
  • Katangian: Gamitin ang attr() function upang ipakita ang mga halaga ng katangian ng mga elemento ng HTML. Halimbawa, maaari mong ipakita ang katangian na title.
  • none: Tinutukoy na walang nilalaman ang ipapakita. Ito ang default na estado.

Mga Tala sa Paggamit

  • 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.

Halimbawa 

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

Ito ay isang halimbawa ng pagdaragdag ng icon bago ang <p> na tag. Sa ganitong paraan, maaari mong biswal na dagdagan ang nilalaman gamit ang mga stylesheet.

Katangiang cursor 

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

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:.

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`**: baguhin ang laki patungo sa itaas.
    - **`s-resize`**: Baguhin ang laki pababa.
    - **`e-resize`**: Baguhin ang laki patungo sa kanan.
    - **`w-resize`**: Baguhin ang laki patungo sa kaliwa.
    - **`ne-resize`**: Baguhin ang laki patungo sa itaas na kanan.
    - **`nw-resize`**: Baguhin ang laki patungo sa itaas na kaliwa.
    - **`se-resize`**: Baguhin ang laki patungo sa ibabang kanan.
    - **`sw-resize`**: Baguhin ang laki patungo sa ibabang kaliwa.

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.

Sa halimbawang ito, ang direksiyon kung saan maaaring baguhin ang sukat ng isang textarea ay tinukoy gamit ang property na resize.

  • Sa resize: both;, maaaring baguhin ang sukat ng isang elemento nang parehong pahalang at patayo.
  • Sa resize: horizontal;, maaari lang baguhin ang sukat ng isang elemento nang pahalang.
  • Sa resize: vertical;, maaari lang baguhin ang sukat ng isang elemento nang patayo.
  • Sa resize: none;, hindi maaaring baguhin ang sukat ng isang elemento.

Mga Uri ng Halaga

  • Ang property na resize ay binibigyan ng halaga na tumutukoy sa direksiyon kung saan maaaring baguhin ang sukat ng isang elemento. Maaari mong tukuyin ang mga sumusunod na halaga.
none
  • Ang pag-tukoy ng none ay nagdi-disable ng pagbabago ng sukat ng elemento. Ito ang default 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).
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 Animation