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

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

  • Teks: Tentukan langsung dengan menempatkan string di dalam "". Menambahkan teks.
  • Gambar: Gunakan fungsi url() untuk memasukkan gambar.
  • Penghitung: Gunakan fungsi counter() untuk menampilkan penghitung.
  • Atribut: Gunakan fungsi attr() untuk menampilkan nilai atribut dari elemen HTML. Sebagai contoh, Anda dapat menampilkan atribut title.
  • none: Menentukan bahwa tidak ada konten yang akan ditampilkan. Ini adalah keadaan default.

Catatan Penggunaan

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

Contoh 

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

Berikut adalah contoh menambahkan ikon sebelum tag <p>. Dengan cara ini, Anda dapat melengkapi konten secara visual melalui stylesheet.

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

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

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`**: mengubah ukuran ke arah atas.
    - **`s-resize`**: mengubah ukuran ke arah bawah.
    - **`e-resize`**: mengubah ukuran ke arah kanan.
    - **`w-resize`**: mengubah ukuran ke arah kiri.
    - **`ne-resize`**: mengubah ukuran ke arah kanan atas.
    - **`nw-resize`**: mengubah ukuran ke arah kiri atas.
    - **`se-resize`**: mengubah ukuran ke arah kanan bawah.
    - **`sw-resize`**: mengubah ukuran ke arah 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.

Dalam contoh ini, arah di mana sebuah textarea dapat diubah ukurannya ditentukan menggunakan properti resize.

  • Dengan resize: both;, sebuah elemen dapat diubah ukurannya baik secara horizontal maupun vertikal.
  • Dengan resize: horizontal;, sebuah elemen hanya dapat diubah ukurannya secara horizontal.
  • Dengan resize: vertical;, sebuah elemen hanya dapat diubah ukurannya secara vertikal.
  • Dengan resize: none;, sebuah elemen tidak dapat diubah ukurannya.

Jenis nilai

  • Properti resize diberikan nilai yang menentukan arah di mana sebuah elemen dapat diubah ukurannya. Anda dapat menentukan nilai berikut.
none
  • Menentukan none menonaktifkan perubahan ukuran elemen. Ini adalah nilai default.
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).
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 3D