Blog Satria - Scrollbar memanglah tidak sangat di perhatikan oleh user yang mendatangi web kita. umumnya user cuma mencermati bagian- bagian yang sangat nampak saja semacam header, bagian content, sidebar, footer, tipe font( baca metode mengganti font dengan overflow scroll css design) serta element yang lain.
Namun buat lebih baik nya buat mendesign suatu template web ataupun aplikasi yang lain. kita wajib mencermati seluruh perihal perinci dari user interface. salah satu contohnya merupakan bagian scroolbar.
Oleh sebab itu pada bimbingan website design kali ini aku hendak mangulas tentang bimbingan metode design tampilan awesome scrollbar css.Kita hendak mengubah/ mengganti tampilan scrollbar dengan css3. supaya lebih nampak menarik serta apik.
CSS3 sudah meyediakan fitur baru yang berperan buat mengurusi hal- hal yang menyangkut dengan scrollbar web. kita bisa mengganti corak track, thumb serta cara membuat scroll bar di html. silahkan sahabat perhatikan contoh berikut ini buat metode mengganti tampilan ataupun membuat cantik scrollbar dengan css3.
Cara Design Scroll Bar Di Blog Dengan Css
Terdapat sebagian guna spesial yang di sajikan oleh css3 buat mengganti tampilan scrollbar. di antara lain merupakan:
::- webkit- scrollbar
::- webkit- scrollbar- track
::- webkit- scrollbar- thumb
Ketiga guna di atas bermanfaat serta sudah di sajikan di css3 buat mengurusi tampilan scrollbar. serta guna nya tiap- tiap merupakan,::- webkit- scrollbar buat bagian scrollbar secara totalitas.::- webkit- scrollbar- track bermanfaat buat tampilan track/ jalan dari scrollbar. serta terakhir::- webkit- scrollbar- thumb buat cursor scrollbar.
Cara Design Tampilan Scrollbar Dengan CSS3
Langsung saja masuk ke contoh membuat cantik scrollbar dengan css.
index. html
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Tampilan Scrollbar Dengan CSS3 | www.blogsatria.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Design Tampilan Scrollbar Dengan CSS3 | www.blogsatria.com</h1>
<div class="wrap">
<p>
Tutorial membuat design scrollbar halaman web, tutorial pemrograman web,design.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut l.abore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>style.css
body{
background: #f3f5f7;
font-family: roboto;
text-align: center;
color: #232323;
}
.wrap{
margin: 10px auto;
width: 950px;
padding: 20px;
color: #fff;
background: #35A9DB;
text-align: justify;
}
/*css3 design scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #666;
}
::-webkit-scrollbar-thumb {
background: #232323;
}Tampilan scrollbar nya juga sukses di ganti. semacam yang nampak pada foto di atas. uraian syntax css buat mengganti tampilan scrollbar nya:
/*css3 design scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #666;
}
::-webkit-scrollbar-thumb {
background: #232323;
}Penutup
Sahabat dapat membiasakan nya sendiri dengan inspirasi serta kemauan sahabat. berikut ini merupakan contoh design cara membuat smooth scroll css yang lain.Sekian dahulu bimbingan Metode Design Tampilan Scrollbar Dengan CSS3. terima kasih.
0 Comments