CSS - Penyusun: Panduan Pemula

Hai sana, para ahli reka bentuk web masa depan! Hari ini, kita akan melihat dunia magis CSS scrollbars. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah bagi Anda dalam perjalanan ini, dan pada akhirnya, Anda akan memesan scrollbars seperti seorang pro!

CSS - Scrollbars

Pengenalan ke Scrollbars

Sebelum kita masuk ke detilnya, mari bicarakan apa itu scrollbars. Anda telah melihat mereka setiap hari saat浏览web - mereka adalah batang kecil di sisi atau bagian bawah halaman web yang memungkinkan Anda untuk menggulir ke atas, ke bawah, ke kiri, atau ke kanan saat ada lebih banyak konten daripada yang dapat muat di layar Anda sekali.

Sekarang, bayangkan jika Anda bisa mengayunkan tongkat sihir dan mengubah bagaimana scrollbar ini terlihat. Well, itu tepat apa yang kita akan belajar hari ini dengan CSS!

Bagaimana Menggaya Scrollbars?

Menggaya scrollbar dengan CSS adalah seperti memberikan halaman web Anda sebuah make over. Itu adalah cara untuk membuat situs Anda menonjol dan memberikan pengalaman pengguna yang unik. Mari kita mulai dengan contoh sederhana:

/* Ini diterapkan ke seluruh tubuh halaman web Anda */
body::-webkit-scrollbar {
width: 12px;               /* lebar scrollbar keseluruhan */
}

body::-webkit-scrollbar-track {
background: orange;        /* warna area pengikis */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* warna tombol gulir */
border-radius: 20px;       /* roundedness tombol gulir */
border: 3px solid orange;  /* membuat padding di sekitar tombol gulir */
}

Dalam contoh ini, kita mengatakan ke browser untuk:

Buat scrollbar 12 piksel lebar
Warna area pengikis (area tempat tombol gulir geser) menjadi oranye
Buat tombol gulir (bagian yang Anda pegang untuk menggulir) biru
Beri tombol gulir sudut yang bundar
Tambahkan border oranye di sekitar tombol gulir

Cukup menarik, kan? Tetapi tunggu, ada lebih banyak lagi!

Pemilih Scrollbar

Untuk menggaya scrollbar, kita menggunakan pemilih khusus. Bayangkan ini sebagai kata sihir yang memberitahu CSS bagian mana scrollbar yang akan diganti. Ini adalah pemilih utama:

Pemilih	Deskripsi
::-webkit-scrollbar	Menggaya scrollbar keseluruhan
::-webkit-scrollbar-button	Menggaya tombol di scrollbar (panah ke atas dan ke bawah)
::-webkit-scrollbar-track	Menggaya jalur (baris kemajuan) scrollbar
::-webkit-scrollbar-track-piece	Menggaya bagian jalur (baris kemajuan) yang tidak ditutup oleh pegangan
::-webkit-scrollbar-thumb	Menggaya pegangan gulir yang dapat digeser
::-webkit-scrollbar-corner	Menggaya sudut bawah scrollbar, di mana scrollbar horizontal dan vertikal bertemu
::-webkit-resizer	Menggaya pegangan resize yang muncul di sudut bawah beberapa elemen

Buat Scrollbar Khusus

Sekarang kita tahu kata sihir (pemilih) kita, mari buat scrollbar khusus yang menyenangkan:

/* Mari buat scrollbar tema neon! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

Dalam contoh ini, kita membuat scrollbar yang mirip dengan film cyberpunk! Jalurnya hitam dengan bayangan dalam, dan tombol gulir memiliki gradien yang berubah saat Anda mengarahkan cursor kepadanya. Terapkan kelas ini ke setiap elemen dengan overflow, dan lihat magiknya!

Menggaya CSS Scrollbar

Marilah kita pecah proses penggayaan scrollbar menjadi langkah-langkah:

Pilih target Anda: Putuskan jika Anda ingin menggaya scrollbar untuk keseluruhan halaman (gunakan body) atau hanya untuk elemen tertentu (gunakan kelas atau ID).
Set lebar: Gunakan pemilih ::-webkit-scrollbar untuk menentukan lebar keseluruhan scrollbar.
Gaya jalur: Gunakan ::-webkit-scrollbar-track untuk menentukan latar belakang, menambahkan bayangan, atau gaya lain ke jalur.
Rancang tombol gulir: Gunakan ::-webkit-scrollbar-thumb untuk menggaya bagian yang dapat digeser scrollbar. Ini adalah tempat Anda dapat kreatif dengan warna, gradien, dan bentuk.
Tambahkan interaktivitas: Gunakan pseudo-kelas seperti :hover atau :active untuk mengubah penampilan scrollbar saat pengguna berinteraksi dengannya.

Berikut adalah contoh yang menggabungkan semuanya:

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

Ini membuat scrollbar modern dan ramping untuk setiap elemen dengan kelas cool-scroll. Scrollbar lebih lebar daripada default, memiliki sudut yang bundar, dan menjadi gelap saat Anda mengarahkan cursor kepadanya.

Properti CSS Terkait Scrollbar

Meskipun kita telah fokus pada browser WebKit (seperti Chrome dan Safari), ada beberapa properti CSS standar yang bekerja di berbagai browser. Ini adalah tabel properti ini:

Properti	Deskripsi
scrollbar-width	Menentukan lebar scrollbar (hanya untuk Firefox)
scrollbar-color	Menentukan warna scrollbar (hanya untuk Firefox)
overflow	Menentukan apa yang harus dilakukan jika konten melampaui kotak elemen
overflow-x	Menentukan apa yang harus dilakukan dengan tepi kiri/kanan konten jika konten melampaui area konten elemen
overflow-y	Menentukan apa yang harus dilakukan dengan tepi atas/bawah konten jika konten melampaui area konten elemen

Ini adalah contoh bagaimana Anda mungkin menggunakannya:

/* Untuk Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* Untuk browser lain */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

Kode ini menentukan gaya scrollbar konsisten di berbagai browser. Itu ramping, dengan jalur yang terang dan tombol gulir yang gelap.

Dan itu saja, teman-teman! Anda telah meningkatkan keterampilan CSS Anda dan belajar bagaimana menggaya scrollbar. Ingat, dengan kekuatan yang besar datang tanggung jawab besar - gunakan teknik ini bijaksana untuk meningkatkan pengalaman pengguna, bukan untuk menciptakan antarmuka yang mengganggu atau sulit digunakan.

Terus eksperimen, terus belajar, dan terutama, bersenang-senang dengan itu! Siapa tahu, mungkin tren besar berikutnya dalam desain web adalah scrollbar yang unik Anda. Selamat coding!

Credits: Image by storyset