Cara Design Tampilan Scrollbar Dengan CSS3


Cara Design Tampilan Scrollbar Dengan CSS3

Cara Design Tampilan Scrollbar Dengan CSS3

Cara Design Tampilan Scrollbar Dengan CSS3 – scrollbar memang tidak terlalu di perhatikan oleh user yang mengunjungi website kita. biasanya user hanya memperhatikan bagian-bagian yang sangat terlihat saja seperti header, bagian content, sidebar, footer, jenis font(baca cara mengubah font dengan css) dan element lainnya. tetapi untuk lebih baik nya untuk mendesign sebuah template website atau aplikasi lainnya. kita harus memperhatikan segala hal detail dari user interface. salah satu contohnya adalah bagian scroolbar. oleh karena itu pada tutorial web design kali ini saya akan membahas tentang tutorial cara design tampilan scrollbar dengan css3. kita akan mengganti/mengubah tampilan scrollbar dengan css3. agar lebih terlihat menarik dan rapi.

CSS3 telah meyediakan fitur baru yang berfungsi untuk mengurusi hal-hal yang menyangkut dengan scrollbar website. kita dapat mengubah warna track, thumb dan scrollbarnya. silahkan teman-teman perhatikan contoh berikut ini untuk cara mengubah tampilan atau mempercantik scrollbar dengan css3.

Cara Design Tampilan Scrollbar Dengan CSS3

Ada beberapa fungsi khusus yang di sediakan oleh css3 untuk mengubah tampilan scrollbar. di antaranya adalah :

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-thumb

ketiga fungsi di atas berguna dan telah di sediakan di css3 untuk mengurusi tampilan scrollbar. dan fungsi nya masing-masing adalah, ::-webkit-scrollbar untuk bagian scrollbar secara keseluruhan. ::-webkit-scrollbar-track berguna untuk tampilan track/jalur dari scrollbar. dan terakhir ::-webkit-scrollbar-thumb untuk cursor scrollbar.

Cara Design Tampilan Scrollbar Dengan CSS3

Cara Design Tampilan Scrollbar Dengan CSS3

Langsung saja masuk ke contoh mempercantik scrollbar dengan css.

index.html

style.css

mempercantik tampilan scrollbar dengan css

mempercantik tampilan scrollbar dengan css

tampilan scrollbar nya pun berhasil di ubah. seperti yang tampak pada gambar di atas. penjelasan syntax css untuk mengubah tampilan scrollbar nya:

jadi di sini kita menentukan lebar dari scrollbar nya sebesar 10px.

untuk bagian track nya kita beri warna abu-abu gelap dengan kode warna #666. dan bagian thumb nya kita beri warna abu-abu kecokalatan yang lebih gelap denan kode warna #232323.

teman-teman bisa menyesuaikan nya sendiri dengan inspirasi dan keinginan teman-teman. berikut ini adalah contoh design scrollbar lainnya.

See the Pen mengubah tampilan scrollbar dengan css3 by Malas Ngoding (@malasngoding) on CodePen.0

Sekian dulu tutorial Cara Design Tampilan Scrollbar Dengan CSS3. terima kasih.

Baca juga :


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

Membuat Menu Navbar Responsive
membuat slider responsive dengan css
membuat menu dropdown sederhana dengan css

Diskusi

1 Komentar
  • qq8788 alternatif 5 years ago

    Terus berkarya ya, tulisannya enak di baca.

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD