Chris Coyier, da CSS-Tricks é um engenheiro e blogueiro incrível. Ele não é apenas criativo, mas sempre teve o ímpeto de colocar suas ideias em prática, independentemente do tamanho. Ele também tem um bom olho para as pequenas coisas que podem tornar o CSS-Tricks ou seu site especial. Uma dessas pequenas coisas é sua barra de rolagem personalizada – vamos dar uma olhada em como ela foi feita!
Para criar esse excelente efeito de barra de rolagem, o senhor precisará usar três seletores CSS e o estilo de sua escolha:
/* Sets the dimensions of the entire scrollbar */
html::-webkit-scrollbar {
width: 30px;
height: 30px;
}
/* The grabbable scrollbar button */
html::-webkit-scrollbar-thumb {
background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#e52e71));
background: linear-gradient(180deg,#ff8a00,#e52e71);
border-radius: 30px;
box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
/* The vertical scrollbar background */
html::-webkit-scrollbar-track {
background: linear-gradient(90deg,#201c29,#201c29 1px,#100e17 0,#100e17);
}
Algumas observações importantes: obviamente, o senhor pode criar suas próprias cores de gradiente, mas, mais importante, essa barra de rolagem funciona somente no Chrome, Safari e Edge.
O senhor precisa ter cuidado com esses tipos de pequenas personalizações. Quando bem feitas, elas agregam à sua marca e ao seu design. Quando mal feitas, confundem o usuário. Bom estilo!
