Skip to main content

Archive

Show more

Custom Scrollbar Design Pure Css | HTML And CSS

by Rustcode
Custom-Scrollbar-Design-HTML-And-CSS

Custom Scrollbar Design Pure Css Using HTML And CSS

"custom scrollbar design" is used by many popular websites, css-tricks being one of them. Normally we don't need to add extra css to modify browser scrollbar which is already rendered. It looks nice and well designed. But if we want to add extra features to our website and provide incredible user experience to the visitor then we can look for custom scroll bar design.

Modifying the browser scrollbar with the help of css is not a big deal. There are immeasurable JavaScript plugins available in the market. Which easily changes the design of the scrollbar. A little css code is required to make simple changes to the sidebar, which we will see later in this article.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Custom Scrollbar Design Pure Css | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
<head>
 <title>Custom Scrollbar Design Pure Css | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<div>
  <img src="car.jpg">
</div>

</body>
</html>



03. CSS

body{
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1200px;
  background: #E1E1E1;
}

img{
  width: 600px;
  border-radius: 4px;
}

::-webkit-scrollbar{
  width: 12px;
}

::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: #2196F3;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.5);
}


::-webkit-scrollbar-track{
  border-radius: 10px;
  background: #D5F7F7;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.45);
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment