Cheesetoast » webkit http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.15 Custom Scrollbars for Webkit Browsers http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/ http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/#comments Tue, 06 Nov 2012 21:23:56 +0000 http://www.cheesetoast.co.uk/?p=977 Having just learned how to customize the scrollbar on webkit browsers I thought I'd update Cheesetoast with a shiny new scrollbar and share the process. If you're already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars. Continue reading

The post Custom Scrollbars for Webkit Browsers appeared first on Cheesetoast.

]]>
A comparison of the scrollbar with and without webkit

Having just learned from CSS Tricks how to customize the scrollbar on webkit browsers I thought I’d update Cheesetoast with a shiny new scrollbar and share the process.

If you’re already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars.

First I set the dimensions of the scrollbar itself. The width will apply to the vertical bar and the height applies to the horizontal.

::-webkit-scrollbar {
width: 10px;
height: 8px;
}

Next up is the track, the part of of the scrollbar behind the handle. It’s possible to use other webkit features such as box-shadow and border-radius:

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,155,194,0.7);
-webkit-border-radius: 10px;
border-radius: 10px;
}

Finally I setup the “thumb”, the handle part of the scrollbar:

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,155,194,0.5);
-webkit-box-shadow: inset 0 0 3px rgba(0,155,194,0.6);
}

I used the selector :horizontal for this part so that I can style the horizontal bar differently from the vertical bar (you can use :vertical too).

::-webkit-scrollbar-thumb:horizontal {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.9);
}

That’s all there was to it. For more information on webkit scrollbars you can read the webkit blog.

The post Custom Scrollbars for Webkit Browsers appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/feed/ 0