Sunday, February 28, 2021
  • Setup menu at Appearance » Menus and assign menu to Top Bar Navigation
Advertisement
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
No Result
View All Result
Home Learn to Code

How to Create a CSS-Tricks Custom Scrollbar

April 13, 2020
in Learn to Code
How to Create a CSS-Tricks Custom Scrollbar
586
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

Chris Coyier of CSS-Tricks is an amazing engineer and blogger. He’s not only creative but has always had the drive to put his thoughts to work, no matter how large. He also has a good eye for the little things that can make CSS-Tricks or your site special. One of those little things is his custom scrollbar — let’s have a look at how it’s done!

To create this excellent scrollbar effect, you’ll need to employ three CSS selectors and the styling of your choosing:

You might also like

How to Install a NPM Module from GitHub Branch

How to Push to a Git Remote Branch of a Different Name

Fix “no such file or directory, scandir”

/* Sets the dimensions of the entire scrollbar */
html::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}

/* The grabbable scrollbar button  */
html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#e52e71));
    background: linear-gradient(180deg,#ff8a00,#e52e71);
    border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}

/* The vertical scrollbar background */
html::-webkit-scrollbar-track {
    background: linear-gradient(90deg,#201c29,#201c29 1px,#100e17 0,#100e17);
}

A few important notes: obviously you can create your own gradient colors but, more importantly, this scrollbar works only in Chrome, Safari, and Edge.

You need to be careful with these types of small customizations. When done well, they add to your branding and design. When done poorly, you confuse your user. Happy styling!

Credit: DavidWalsh By: David Walsh

Previous Post

Wind Turbine Surface Damage Detection using Deep Learning Algorithm

Next Post

Ripple Executive Says Automation, Machine Learning and Digital Assets Transforming International Payments Infrastructure

Related Posts

How to Change the WordPress Admin Login Logo
Learn to Code

How to Install a NPM Module from GitHub Branch

February 12, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

How to Push to a Git Remote Branch of a Different Name

February 9, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Fix “no such file or directory, scandir”

February 8, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Confessions of a Web Developer XVIII

February 3, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

JavaScript Wake Lock API

January 25, 2021
Next Post
Ripple Executive Says Automation, Machine Learning and Digital Assets Transforming International Payments Infrastructure

Ripple Executive Says Automation, Machine Learning and Digital Assets Transforming International Payments Infrastructure

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

January 6, 2019
Microsoft, Google Use Artificial Intelligence to Fight Hackers

Microsoft, Google Use Artificial Intelligence to Fight Hackers

January 6, 2019

Categories

  • Artificial Intelligence
  • Big Data
  • Blockchain
  • Crypto News
  • Data Science
  • Digital Marketing
  • Internet Privacy
  • Internet Security
  • Learn to Code
  • Machine Learning
  • Marketing Technology
  • Neural Networks
  • Technology Companies

Don't miss it

Python vs R! Which one should you choose for data Science
Data Science

Python vs R! Which one should you choose for data Science

February 28, 2021
Can Java be used for machine learning and data science?
Machine Learning

Can Java be used for machine learning and data science?

February 28, 2021
These four new hacking groups are targeting critical infrastructure, warns security company
Internet Security

These four new hacking groups are targeting critical infrastructure, warns security company

February 28, 2021
The Time-Series Ecosystem – Data Science Central
Data Science

The Time-Series Ecosystem – Data Science Central

February 28, 2021
Accurate classification of COVID‐19 patients with different severity via machine learning – Sun – 2021 – Clinical and Translational Medicine
Machine Learning

Accurate classification of COVID‐19 patients with different severity via machine learning – Sun – 2021 – Clinical and Translational Medicine

February 28, 2021
Privacy Commissioner asks for clarity on minister’s powers in Critical Infrastructure Bill
Internet Security

Privacy Commissioner asks for clarity on minister’s powers in Critical Infrastructure Bill

February 28, 2021
NikolaNews

NikolaNews.com is an online News Portal which aims to share news about blockchain, AI, Big Data, and Data Privacy and more!

What’s New Here?

  • Python vs R! Which one should you choose for data Science February 28, 2021
  • Can Java be used for machine learning and data science? February 28, 2021
  • These four new hacking groups are targeting critical infrastructure, warns security company February 28, 2021
  • The Time-Series Ecosystem – Data Science Central February 28, 2021

Subscribe to get more!

© 2019 NikolaNews.com - Global Tech Updates

No Result
View All Result
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News

© 2019 NikolaNews.com - Global Tech Updates