Articles
Pengenalan ke CSS
Properti CSS Terkait Antarmuka Pengguna

Properti CSS Terkait Antarmuka Pengguna

Artikel ini menjelaskan properti CSS yang terkait dengan antarmuka pengguna.

Anda dapat mempelajari tentang properti content, cursor, pointer-events, dan resize, termasuk kasus penggunaannya dan cara menuliskannya.

YouTube Video

HTML untuk Pratinjau

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>

Terkait Antarmuka Pengguna

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

Properti content digunakan untuk menambahkan konten pada elemen pseudo, terutama ::before atau ::after. Properti ini digunakan untuk mendefinisikan teks, gambar, penghitung, dll., yang tidak ditampilkan langsung di dalam elemen. Peran utamanya adalah untuk mengatur konten dekoratif atau informasi tambahan yang tidak ditulis langsung di HTML melalui stylesheet.

Dalam contoh ini, "Catatan: " ditambahkan sebelum elemen, dan "(Akhir)" ditambahkan setelahnya. Ini menggunakan elemen pseudo ::before dan ::after secara berturut-turut.

Nilai-nilai dari properti 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;

Properti content dapat memiliki nilai-nilai berikut:.

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}
  • Teks
    • Anda dapat menambahkan teks dengan membungkus string secara langsung dalam tanda kutip ganda ("").
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}
  • Gambar
    • Anda dapat menyisipkan gambar menggunakan fungsi url().
 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}
  • Penghitung
    • Gunakan fungsi counter() untuk menampilkan penghitung.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Atribut
    • Fungsi attr() dapat digunakan untuk menampilkan nilai atribut dari elemen HTML. Sebagai contoh, Anda dapat menampilkan atribut title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • tidak ada
    • Menentukan bahwa tidak ada konten yang harus ditampilkan. Ini adalah keadaan default.

Catatan Penggunaan

Saat menggunakan properti content, perhatikan hal-hal berikut:.

  • Properti content hanya berlaku pada elemen pseudo, bukan elemen biasa.
  • Karena tidak ditambahkan ke DOM, properti ini tidak dapat dimanipulasi langsung dengan JavaScript.
  • Ini mungkin memengaruhi tata letak, sehingga sering digunakan untuk menampilkan informasi dekoratif atau tambahan.

Properti cursor

Properti cursor digunakan untuk menentukan jenis kursor yang akan ditampilkan ketika pointer mouse berada di atas sebuah elemen. Anda dapat menentukan berbagai gaya kursor, dan ini sering diterapkan pada elemen interaktif untuk meningkatkan pengalaman pengguna.

Jenis-Jenis Kursor Utama

Nilai-nilai berikut dapat ditentukan sebagai jenis kursor:.

 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
  • default adalah kursor panah normal (kursor default browser).
pointer
  • pointer adalah kursor berbentuk tangan yang ditampilkan saat berada di atas sebuah tautan.
text
  • text adalah kursor berbentuk I-beam yang ditampilkan di area di mana teks dapat dipilih.
move 
- `move` adalah kursor berbentuk salib yang digunakan ketika sebuah elemen dapat diseret.
crosshair
  • crosshair adalah kursor berbentuk garis bidik untuk seleksi yang presisi.
not-allowed
  • not-allowed adalah kursor untuk area atau tindakan yang tidak diizinkan.
help
  • help adalah kursor dengan tanda tanya yang ditampilkan ketika berada di atas elemen yang dapat memberikan informasi bantuan.
wait
  • wait adalah kursor berbentuk jam pasir atau lingkaran yang mewakili status pemrosesan.
progress
  • progress adalah kursor yang menunjukkan operasi sedang berlangsung. Namun, ini menunjukkan bahwa pengguna dapat melakukan operasi lain.
grab
  • grab adalah kursor untuk menangkap elemen yang dapat diseret.
grabbing
  • grabbing adalah kursor yang menunjukkan bahwa sebuah elemen sedang diseret.
resize

resize adalah kursor yang digunakan ketika jendela atau elemen dapat diubah ukurannya. Ada berbagai jenis tergantung pada arah.

  • n-resize: Kursor pengubah ukuran yang menunjuk ke atas.

  • s-resize: Kursor pengubah ukuran yang menunjuk ke bawah.

  • e-resize: Kursor pengubah ukuran yang menunjuk ke kanan.

  • w-resize: Kursor pengubah ukuran yang menunjuk ke kiri.

  • ne-resize: Kursor pengubah ukuran yang menunjuk ke kanan atas.

  • nw-resize: Kursor pengubah ukuran yang menunjuk ke kiri atas.

  • se-resize: Kursor pengubah ukuran yang menunjuk ke kanan bawah.

  • sw-resize: Kursor pengubah ukuran yang menunjuk ke kiri bawah.

Kursor kustom 

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

Juga dimungkinkan untuk menentukan kursor kustom menggunakan url().

  • Dalam contoh ini, custom-cursor.png adalah file gambar untuk kursor. Jika gambar tersebut tidak tersedia, kursor default browser akan ditampilkan dengan auto.

Ringkasan

  • cursor property menentukan kursor mana yang akan ditampilkan ketika pengguna berada di atas elemen.
  • Ada berbagai gaya kursor yang tersedia tergantung pada penggunaan, dan kursor kustom juga dapat diatur.
  • Dengan memilih gaya kursor yang sesuai berdasarkan elemen interaktif dan operasi terbatas, UI yang lebih ramah pengguna dapat disediakan.

Properti pointer-events 

 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}

pointer-events property digunakan untuk mengontrol bagaimana elemen menangani peristiwa dari pointer devices seperti mouse, sentuhan, dan stylus. Biasanya, ketika sebuah elemen diklik atau diarahkan oleh pengguna, elemen tersebut menerima peristiwa pointer, tetapi perilaku ini dapat diubah menggunakan properti ini.

  • Dalam kelas pointer-events-auto, properti pointer-events diatur ke auto, memungkinkan peristiwa klik dan hover normal untuk diproses. Elemen tersebut dapat diklik, sehingga sebuah pesan ditampilkan saat elemen tersebut diklik.

  • Dalam kelas pointer-events-auto, properti pointer-events diatur ke none, sehingga elemen tidak menerima peristiwa pointer. Bahkan jika properti cursor diatur ke pointer, kursor mouse tidak berubah, dan elemen lain di bawahnya menjadi dapat diklik.

Jenis nilai

  • pointer-events property menentukan apakah sebuah elemen menerima peristiwa pointer dan bagaimana caranya. Anda dapat menentukan nilai berikut.
auto
  • auto adalah nilai default, di mana elemen menerima peristiwa pointer secara normal.
none
  • Ketika none ditentukan, elemen tidak menerima peristiwa pointer. Elemen menonaktifkan interaksi seperti mengklik dan mengarahkan kursor, tetapi elemen lain di bawahnya masih dapat menerima peristiwa pointer.
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;
  • Nilai-nilai ini terutama digunakan untuk elemen SVG. Setiap nilai mengontrol apakah bagian tertentu dari elemen (seperti fill, stroke, dll.) merespons peristiwa pointer. Hal ini jarang digunakan dengan elemen HTML biasa.

Poin Penting untuk Penggunaan

Berikut adalah beberapa contoh cara menggunakan properti pointer-events.

  1. Memilih elemen yang ingin Anda nonaktifkan

    • Nilai none berguna untuk sementara menonaktifkan elemen seperti tombol atau tautan.

  2. Penggunaan dengan elemen yang dilapisi

    • Ketika properti position disetel ke absolute atau elemen ditumpuk menggunakan properti z-index, menyetel pointer-events menjadi none pada elemen atas memungkinkan peristiwa pointer dikirim ke elemen di bawahnya.

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

Properti resize adalah properti CSS yang menentukan ke arah mana elemen dapat diubah ukurannya oleh pengguna. Dengan menggunakan properti ini, Anda dapat memungkinkan elemen untuk diubah ukurannya secara vertikal atau horizontal dengan menyeret, atau menonaktifkan perubahan ukuran sepenuhnya.

Jenis nilai

  • Properti resize menentukan arah di mana suatu elemen dapat diubah ukurannya. Anda dapat menentukan nilai berikut.
both
  • Menentukan both memungkinkan elemen diubah ukurannya baik dalam arah vertikal maupun horizontal.
horizontal
  • Menentukan horizontal memungkinkan elemen diubah ukurannya hanya dalam arah horizontal (lebar).
vertical
  • Menentukan vertical memungkinkan elemen diubah ukurannya hanya dalam arah vertikal (tinggi).
none
  • Menentukan none menonaktifkan perubahan ukuran elemen. Ini adalah nilai default.
inherit
  • Menentukan inherit membuat elemen mewarisi nilai properti resize dari elemen induknya.

Catatan

  • Untuk membuat elemen dapat diubah ukurannya, Anda harus mengatur properti overflow bersama dengan properti resize. Elemen yang dapat diubah ukurannya mungkin memerlukan bilah gulir, dan biasanya diatur overflow: auto.
  • Mengubah ukuran biasanya digunakan dengan elemen blok seperti div dan textarea.

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

YouTube Video

Properti CSS yang Terkait dengan Animasi 3DProperti CSS Terkait Float