10 Powerful CSS Properties that Every Web Developer must know
<h1>You probably never heard of them, but you will love them once you know.</h1>
<p>CSS.</p>
<p>A language which is responsible for nearly every website in the world.</p>
<p>With so many properties, CSS is pretty huge. Finding good properties among them is like trying to read a binary file by yourself (pls don’t try it).</p>
<p>Which is why I have done that for you (the CSS, not the binary).</p>
<p>Here are 10 properties that you may not use much, or have never heard of, but will love once you know them.</p>
<p> </p>
<p>Photo by <a href="https://unsplash.com/@markusspiske?utm_source=medium&utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Markus Spiske</a> on <a href="https://unsplash.com/?utm_source=medium&utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Unsplash</a></p>
<h2>Custom Scrollbars</h2>
<p>Let’s change the width and color of the scroll bar. Also, let’s make it a little round as well.</p>
<p>Below are the parts of a scroll bar.</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:300/1*tBEDAO1NmD6934dWUFZufw.png" style="height:300px; width:300px" />=</p>
<p>What the different parts of a scroll bar are | Image by Author</p>
<p>We use <code>::-webkit-scrollbar</code> to change the properties.</p>
<pre>
/* Set the width of the scroll bar*/
::-webkit-scrollbar{
width: 10px;
}
/* Change the track to a blue color and give a round border */
::-webkit-scrollbar-track{
background-color: blue;
border-radius: 10px;
}
/* Making the thumb (which shows how much you've scrolled) a gray color
and making it round */
::-webkit-scrollbar-thumb{
background: gray;
border-radius: 10px
}
/* A dark gray color when hovered overn */
::-webkit-scrollbar-thumb:hover{
background: darkgray;
}</pre>
<p> </p>
<p>The result of the code | Image by Author</p>
<p>Note: This is a non-standard property, and without -<code>webkit-</code>, it will not work.</p>
<h2>Cursors</h2>
<p>Change how the cursor looks when you mouse over an element.</p>
<pre>
/* An element with class 'first' */
.first{
cursor: not-allowed;
}
/* An element with class 'second' */
.second{
cursor: zoom-in;
}
/* An element with class 'third' */
.third{
cursor: crosshair;
}</pre>
<p> </p>
<p>Result of the above code. The cursor on different elements | Image by Author</p>
<h2>Scroll behavior</h2>
<p>The scroll behavior can make a smooth scroll, to make transition from one section to another smoother.</p>
<p>Add this simple line and see the effect for yourself.</p>
<pre>
html{
scroll-behavior:smooth;
}</pre>
<p>Instead of simply snapping the page from one section to another, it scroll up/down to the section. </p>
<p><a href="https://medium.com/@anirudh.munipalli/10-powerful-css-properties-that-every-web-developer-must-know-e5d7f8f04e10">Click Here</a></p>