Mengganti Scroll Browser dengan CSS3

Template Landing Page untuk Blogspot

Secara umum biasanya scroller disetiap browser itu berbeda-beda, ketika kita membuat sebuah website yang diharapkan tampilannya seragam kadang terganggu dengan scroller ini, bagaimana cara agar menyelaraskan tampilan scroller ini?

Saya baru dapat ilmu bagaimana mengganti sroller browser ini dengan CSS3. berikut kode CSS nya :

/* scroller browser */
::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1); 
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #a6a5a5;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.4); 
}

Untuk lebar scroller bisa disesuaikan, saya disini pakai 5px;

dari kode diatas itu tampilannya akan seperti di demo ini

Tags

mengganti background saat di scroll web#spf=1,cara mengubah scrollbar html,merubah style scroll css,mengubah scrollbardefault css,mengubah scroll dengan css,menggantu scroll page di html,membuat tampilan scrol lebih menarik dengan css,ganti web browser,cara merubah scroll,agar tampilan webkit bisa sesuai,cara mengubah scroll default html css,cara mengganti scrrol broser,cara mengganti scroll browser ketika du web kita,cara mengganti mode di css,cara mengganti background -image di CSs,cara mempercantik scroll html,cara ganti rambut AS dengan menggunakan scroll,cara format font menggunakan webkit di desain web,tampilan webkit

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage kocaeli escort