Plurrrr

In 2011, Apple released Mac OS X Lion which introduced an enhanced scrollbar behavior that made scrollbars hidden by default. The scrollbar appears when the user starts scrolling a document and disappears after the scrolling stops.

It appears, however, that this enhancement did not only change the user interface, but has also shaped how developers (don't) think about that specific UI element when creating cross-platform solutions. I call it scrollbar blindness.

Lately, for some reason, I've started to notice more of it. I have been to numerous websites that have elements with overflow-y or overflow-x set to scroll while the element is not meant to be scrollable. For no apparent reason, some even set both x and y axes scrollable or create multiple levels of stacked scrollbars.

The spacing between individual elements of a website and, in particular, the vertical spacing, has been a regular matter of debate between web designers and developers. Designers insist that what they see in the browser doesn’t look at all like the layout they originally designed. Developers respond that all the margins in the style sheets exactly match the margins in the layout. So who is right? The tricky thing is: In a way, they are both right.

Many people know how to use CSS to style websites, but when it comes to CSS artwork, they get confused on how they are made.

So i thought it might be helpful if i share my humble experience with you, I am going to discuss some important CSS knowledge you will need to have, in order to make your own CSS art and enjoy it as i do, let’s start🚀