Fox Games
Fox Games!.
Bem Vindo convidado, faça sua conta , e logue nela e faça parte dessa familia!.
Nova Comunidade de games que chegou para arrasar os fóruns!

[CSS] Google Scrollbar

Ir em baixo

[CSS] Google Scrollbar

Mensagem por Łazy™ em Qua Nov 28, 2012 7:37 pm

Olá,

Conhecem aquela barra de rolagem que a Google tem?
Aqui está o código.

Demonstração: [Você precisa estar registrado e conectado para ver este link.]
Código:
// Google Scrollbar - By Łazy™ and Google Inc.

::-webkit-scrollbar{height:16px;overflow:visible;width:16px}
::-webkit-scrollbar-button{height:0;width:0}
::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 4px}
::-webkit-scrollbar-track:horizontal{border-width:4px 0 0}
::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.1)}
::-webkit-scrollbar-track:horizontal:hover{box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}
::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.0)}
::-webkit-scrollbar-track:horizontal:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-track:hover{background-color:rgba(255,255,255,.1);box-shadow:inset 1px 0 0 rgba(255,255,255,.2)}
::-webkit-scrollbar-track:horizontal:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
::-webkit-scrollbar-track:active{background-color:rgba(255,255,255,.1);box-shadow:inset 1px 0 0 rgba(255,255,255,.25),inset -1px 0 0 rgba(255,255,255,.15)}
::-webkit-scrollbar-track:horizontal:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.15)}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 6px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb:horizontal{border-width:6px 1px 1px;padding:0 0 0 100px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07)}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)}
::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,0.5);box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35)}::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.3);box-shadow:inset 1px 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(255,255,255,.1)}::-webkit-scrollbar-thumb:horizontal{box-shadow:inset 1px 1px 0 rgba(255,255,255,.15),inset -1px 0 0 rgba(255,255,255,.1)}::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.6);box-shadow:inset 1px 1px 1px rgba(255,255,255,.37)}::-webkit-scrollbar-thumb:active{background-color:rgba(255,255,255,.75);box-shadow:inset 1px 1px 3px rgba(255,255,255,.5)}::-webkit-scrollbar-track{border-width:0 1px 0 6px}::-webkit-scrollbar-track:horizontal{border-width:6px 0 1px}::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.035);box-shadow:inset 1px 1px 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(0,0,0,.07)}::-webkit-scrollbar-track:hover{background-color:rgba(255,255,255,.07);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),inset -1px -1px 0 rgba(255,255,255,.15)}::-webkit-scrollbar-thumb{border-width:0 1px 0 6px}::-webkit-scrollbar-thumb:horizontal{border-width:6px 0 1px}::-webkit-scrollbar-corner{background:transparent}body::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:0 0 0 1px;box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)}body::-webkit-scrollbar-track-piece:horizontal{border-width:3px 0 0;box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)}body::-webkit-scrollbar-thumb{border-width:1px 1px 1px 5px}body
::-webkit-scrollbar-thumb:horizontal{border-width:5px 1px 1px}body
::-webkit-scrollbar-corner{background-clip:padding-box;background-color:#f5f5f5;border:solid #fff;border-width:3px 0 0 3px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.14)}
::-webkit-scrollbar-track:vertical{background-color:#f5f5f5;margin-top:0px}
::-webkit-scrollbar{height:16px;width:16px}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{display:block}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement{display:none}
::-webkit-scrollbar-track:vertical{background-clip:padding-box;background-color:#fff;border-left:5px solid transparent;border-right:0 solid transparent}
::-webkit-scrollbar-track:horizontal{background-clip:padding-box;background-color:#fff;border-bottom:0 solid transparent;border-top:5px solid transparent}
::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);background-clip:padding-box;background-color:rgba(0,0,0,.2);min-height:28px;padding-top:100px}
::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);background-color:rgba(0,0,0,.4)}
::-webkit-scrollbar-thumb:active{-webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,.35);background-color:rgba(0,0,0,.5)}
::-webkit-scrollbar-thumb:vertical{border-bottom:0 solid transparent;border-left:5px solid transparent;border-right:0 solid transparent;border-top:0 solid transparent}
::-webkit-scrollbar-thumb:horizontal{border-bottom:0 solid transparent;border-left:0 solid transparent;border-right:0 solid transparent;border-top:5px solid transparent}
OBS: Só pega com Google Chrome ou Webkit Navigator.
Créditos: Google Inc, e Łazy™.

Cordialmente ...
avatar
Łazy™
Administração

Post's : 21

Pontos : 54447

Like's : 0

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [CSS] Google Scrollbar

Mensagem por FireWhip em Qui Nov 29, 2012 1:38 pm

Olá!

senhor muito obrigado por compartilhar conosco!

Até mais.
avatar
FireWhip
Moderação

Post's : 56

Pontos : 304

Like's : 0

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum