Saturday, February 02, 2019

A Gorgeous Scrollbar - Courtesy of Chris Coyier

Why won't the guy clearly tell people how it's done? I searched and ended up having to reverse engineer. His CSS style-sheet, once you de-obfuscate, is about a 1000 lines long!

<style type="text/css">
 html {
  --maxWidth:1284px;
  scrollbar-color:linear-gradient(to bottom,#ff8a00,#da1b60);
  scrollbar-width:30px;
  background:#100e17;
  color:#fff;
  overflow-x:hidden
 }
 html::-webkit-scrollbar {
  width:30px;height:30px
 }
 html::-webkit-scrollbar-thumb {
  background:-webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
  background:linear-gradient(to bottom,#ff8a00,#da1b60);
  border-radius:30px;
  -webkit-box-shadow:inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);
  box-shadow:inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)
 }
 html::-webkit-scrollbar-track {
  background:linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17)
 }

</style>

Let's dole out some credit where it's due : you can learn some cool stuff from Brad at his YT vid.
It strikes me while I'm watching it that - Rob Percival is lame - if you look at how he reverse-engineers the BBC page... man! Get yourself a Brad video!
Then it strikes me a while later - who are the geniuses at GOOG to have the vision to create such tools to put power in the hands of the laity? I've heard Pichai being given the credit for proposing Chrome..

No comments: