Posts in Category: snippets

Customize the Browser’s Scrollbar only with CSS

-webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:

  1. ::-webkit-scrollbar the background of the bar itself.
  2. ::-webkit-scrollbar-button the directional buttons on the scrollbar.
  3. ::-webkit-scrollbar-track the empty space “below” the progress bar.
  4. ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.
  5. ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of

    Read More

Pure CSS Page Loader in website

preloader or what some call a loading screen — is the what you see on some sites before the main content of the web page is loaded.


Read More

Fix iOS bug not displaying 100vh correctly

There are many Javascript fixes for the viewport height units bug in iOS 7 (iPhone & iPad), this article will cover how to resolve this bug with CSS. This particular bug affects the rendering of viewport height units, for example: if you try to make a full viewport height container

Read More

Create responsive websites with CSS3 media query

Responsive web design (RWD) is an approach whereby a designer creates a web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an over-sized desktop computer monitor, a laptop or devices with small screens such as smartphones and

Read More