Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3
Dunia Programming - Pada kesempatan kali ini, saya akan membagikan ilmu yang saya dapat tentang Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3, mungkin kalian tidak pernah berpikir, bisakah scroll bar pada browser kita ubah sesuai keinginan kita...? bagaimana cara merubah warna scroll bar..? merubah ukuran scroll bar dan lain lain..?.
itu merupakan hal yang sangat sepele, namun bagi kalian yang baru terjun di dunia web desain pastinya akan senang dan merasa bahagia apabila kalian mendapatkan ilmu dengan cara merubah scroll bar dari tampilan browser.
1). Buat folder baru dengan nama EfekScrollBar
2). Kemudian, buka Web Editor yang kalian punya, kalian bisa gunakan web editor apapun, dan untuk saran saya, gunakan Web Editor Sublime Text Versi 3 agar kalian bisa lebih mudah dalam melakukan proses pengcodingan
Baca Juga :
3). Setelah itu, buat file dengan nama index.html pada folder EfekScrollBar
4). Buat tampilan HTML sederhananya sebagai contoh, kalian bisa copy source code dibawah ini :
5). Setelah itu, buat file dengan nama style.css didalam folder EfekScrollBar, dan kemudian copy source code dibawah ini tapat pada file style.css
Keterangan :
untuk webkit-scrollbar itu merupakan perubahan pada background atau tempat scroll bar bergerak
untuk webkit-scrollbar-thumb merupakan warna atau desain dari scrollbar pada browser
6). Setelah semua langkah diatas kalian lakukan, selanjutnya buka file index.html yang sudah kalian buat menggunakan Browser Chrome, dan lihat bagaimana hasilnya.
Firefox : -moz-
Opera : -o-
Internet Explorer : -ms-
ganti kata -webkit- dengan browser yang sering kalian gunakan, atau kalian bisa gunakan semua source code untuk Firefox dan browser lainnya, agar bisa dibuka di semua tampilan browser
Bagaimana..? sudah berhasil bukan..?
Dan nantikan tutorial-tutorial Dunia Programming selanjutnya, agar kalian tidak ketinggalan dengan tutorial Dunia Programming, silahkan kalian bisa Like Fanspage Dunia Programming atau bisa Subscribe dengan mengirimkan alamat email kalian pada kolom Subscribe Email, semoga bermanfaat, Terima Kasih
 |
| Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3 |
itu merupakan hal yang sangat sepele, namun bagi kalian yang baru terjun di dunia web desain pastinya akan senang dan merasa bahagia apabila kalian mendapatkan ilmu dengan cara merubah scroll bar dari tampilan browser.
"Bagaimana Cara Merubahnya...?"Nah, untuk cara merubahnya sangat simpel, sekali, kalian hanya perlu menambahkan script CSS3 pada style atau css kalian. Dan langsung saja kita mulai pembuatan scroll barnya.
Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3
1). Buat folder baru dengan nama EfekScrollBar
2). Kemudian, buka Web Editor yang kalian punya, kalian bisa gunakan web editor apapun, dan untuk saran saya, gunakan Web Editor Sublime Text Versi 3 agar kalian bisa lebih mudah dalam melakukan proses pengcodingan
Baca Juga :
3). Setelah itu, buat file dengan nama index.html pada folder EfekScrollBar
4). Buat tampilan HTML sederhananya sebagai contoh, kalian bisa copy source code dibawah ini :
CSS3
<!doctype html>
<html>
<head>
<title>Belajar CSS3 - Dunia Programming</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Belajar CSS3</h1>
<p>Belajar Merubah Tampilan Scroll Bar Pada Web Browser</p>
<span><a href="http://www.programmingindo.com">Dunia Programming</a></span>
</body>
</html>
<html>
<head>
<title>Belajar CSS3 - Dunia Programming</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Belajar CSS3</h1>
<p>Belajar Merubah Tampilan Scroll Bar Pada Web Browser</p>
<span><a href="http://www.programmingindo.com">Dunia Programming</a></span>
</body>
</html>
5). Setelah itu, buat file dengan nama style.css didalam folder EfekScrollBar, dan kemudian copy source code dibawah ini tapat pada file style.css
CSS3
/* Scrollbar */
::-webkit-scrollbar {
background:#181a1c;
width:5px;
}
::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#fece1a;
}
::-webkit-scrollbar {
background:#181a1c;
width:5px;
}
::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#fece1a;
}
Keterangan :
untuk webkit-scrollbar itu merupakan perubahan pada background atau tempat scroll bar bergerak
untuk webkit-scrollbar-thumb merupakan warna atau desain dari scrollbar pada browser
6). Setelah semua langkah diatas kalian lakukan, selanjutnya buka file index.html yang sudah kalian buat menggunakan Browser Chrome, dan lihat bagaimana hasilnya.
"Min, kok saya buka di browser Mozilla Firefox dan Opera kok tidak ada perubahan ya..? padahal source codenya udah benar"Nah, pertanyaan yang sangat bagus, untuk source code diatas hanya bisa berfungsi untuk browser Chrome, namun kalian juga bisa memfungsikan pada browser yang lain seperti Firefox, Opera dan Internet Explorer dengan cara sebagai berikut :
Firefox : -moz-
Opera : -o-
Internet Explorer : -ms-
ganti kata -webkit- dengan browser yang sering kalian gunakan, atau kalian bisa gunakan semua source code untuk Firefox dan browser lainnya, agar bisa dibuka di semua tampilan browser
Bagaimana..? sudah berhasil bukan..?
Dan nantikan tutorial-tutorial Dunia Programming selanjutnya, agar kalian tidak ketinggalan dengan tutorial Dunia Programming, silahkan kalian bisa Like Fanspage Dunia Programming atau bisa Subscribe dengan mengirimkan alamat email kalian pada kolom Subscribe Email, semoga bermanfaat, Terima Kasih
Belum ada Komentar untuk "Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3"
Posting Komentar