Create custom scrollbars using CSS
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=lvKK2fs6h4I
Having a custom scrollbar can help tie the branding of a site together on the page, as well as help it match an app as well, and it's really easy to do! • You can do more than I did here, including styling the up and down arrow buttons, the empty spaces on the top and bottom, and more! https://developer.mozilla.org/en-US/d... • ๐ Links • โ The Code from this video: https://codepen.io/kevinpowell/pen/gO... • โ More info on HSL: • Are you using the WRONG color model i... • โ More info on logical properties: • Write better CSS using logical proper... • โ Timestamps • 00:00 - Introduction • 01:03 - The basics of custom scrollbars • 03:18 - Hover effects on your scrollbar • 03:58 - Changing the shape and making it look a bit nicer • 06:01 - Targetting specific scrollbars • 06:58 - Vertical scrollbars • 08:23 - Browser support • 12:07 - Things to avoid! • #css • -- • Come hang out with other dev's in my Discord Community • ๐ฌ / discord • Keep up to date with everything I'm up to • โ https://www.kevinpowell.co/newsletter • Come hang out with me live every Monday on Twitch! • ๐บ / kevinpowellcss • --- • Help support my channel • ๐จ๐ Get a course: https://www.kevinpowell.co/courses • ๐ Buy a shirt: https://teespring.com/stores/making-t... • ๐ Support me on Patreon: / kevinpowell • --- • My editor: VS Code - https://code.visualstudio.com/ • --- • I'm on some other places on the internet too! • If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. • Twitter: / kevinjpowell • Codepen: https://codepen.io/kevinpowell/ • Github: https://github.com/kevin-powell • --- • And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
#############################
