Top 5 Stylish Website Scroll Bar Design For Site
Top 5 stylish scroll bar design for website ke bare me batunga. Agar aap apne blog website ko beautiful design dena chahte hai.
Is post me aapko stylish website scroll bar css style ya website scroll bar design ke bare me batane wala hu. joke bahut hi responsive fast speed Aur stylish scroll bar hai jo high speed scrolling karte hai.
Actually hamre Blog website par jo reader athe hai. Wo sabse phale Blog desgin ko sabse phale dekte hai. Taki unhe blog article ko read karne me assni ho. yeah bat sayad apko bi pata hi hogi.
Jis blog ka design smoth aur attractive hota hai ushe reader ushe Utna hi Like karenge. To athe hai apne topic par. How to customize website scroll bar design using css
विषय-सूची
How To Customize website Scroll bar Using Css
Blog website me scroll bar customize kaise kare ye bahut asan hai. Aap sirf step by step article ko follow kare.
How to Change website scroll bar Using Css
1. Sabse phale Apne Blogger dashboard me jaye ab.
2. Go to theme >>edit html per click kariye.
4. Now press Ctrl+f Are search box me ]]></b:skin> type kare.
5. ]]></b:skin> ke Uper code Niche diye gaye css code ko paste kar de.
Finally Uske bad aapke Blog website ka scrollbar customize ho jayega.
5 Website Stylish scrollbar design css:-
::-webkit-scrollbar{ width: 11px; } ::-webkit-scrollbar-track{ background: #c4c6c8; } ::-webkit-scrollbar-thumb{ background: #46c1ea; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); } ::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:horizontal:hover{ background: #007757; }
Scroll bar Customization
- Touch background color#c4c6c8
- horizontal background color #007757
- Ap apne choice se color ko change kar sakte hai.
Scroll bar Design 2.
::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 8px #00B141; } ::-webkit-scrollbar-thumb { background: yellowgreen; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:hover { background: green; } ::-webkit-scrollbar-thumb:active { background: #000000; }
Scrollbar Customization
agar aap scrollbar ka color change karna chahte hai to apko color ke code ko badlna hoga. Are ap apni pasand ke color ko chose kar sakte hai. color code is parkar ka hai for example #000000 something
Scrollbar design 3.
::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f)); background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); } ::-webkit-scrollbar-thumb:hover { background: #008542; } ::-webkit-scrollbar-thumb:active { background: #004522; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }
Scrollbar Customization
Agar aap scroll bar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chosse kar sakte hai. color code is parkar ka hai for example #000000 something
Scrollbar Design 4.
/*—–Custom ScrollBar By Hackintricks4u.blogspot.com—*/ ::-webkit-scrollbar{width:12px;height:8px} ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3);background:#ffffff} ::-webkit-scrollbar-thumb{background: rgba(43,22,22,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)} ::-webkit-scrollbar-thumb:window-inactive{background:rgba(43,22,22,0.4)}
Scrollbar Customization
Agar aap scroll bar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni pasand ke color ko chose kar sakte hai. color code is parkar ka hai for example #000000 something
scroll bar Design 5.
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { border-radius: 10px; } ::-webkit-scrollbar-thumb { background-color: #ecf400; background: #BA8B02; background: -webkit-linear-gradient(to right, #181818, #BA8B02); background: linear-gradient(to right, #181818, #BA8B02); } ::-webkit-scrollbar-thumb:hover { background: #333; } ::-webkit-scrollbar-thumb:active { background: #000000; }
Scrollbar Customization
Agar aap scroll bar ka color change karna chate hai to apko color ke code ko badlna hoga. Are ap apni passand ke color ko chosse kar sakte hai. color code is parkar ka hai for example #000000 something
I hope apko blog website ke liye best best scrollbar css style for blog website article acha laga hoga to is post ko social media per jarur share kare.
Agar apko stylish website scroll bar css style for blog website me add karne me khoi problem ho to hame comment karke bataye.
Are agar aap Hamare article ke notification apne Email per chate hai to hame newsletter duwara subscribe Kare. Taki apko notification milte rhe.
Read also
