Barra de Rolagem e Seleção colorida no Animespirit / Social Spirit

Style Daijobu, Pierrot

Olá galerinha geek! Como estão? :)

Hoje trago outro tutorial do Animespirit | Social Spirit. Esse é pra você deixar o seu Style mais charmosinho :) Vou ensinar a personalizar a barra de rolagem da página e a deixar a seleção colorida!

Os créditos pelos códigos vão todos ao Cherry Bomb.

Após baixar o arquivo modelo.v2.2 do site, extraia o conteúdo em uma pasta. Abra o bloco de notas modelo.

Clique no bloco de notas, aperte Ctrl + F e procure por #base.

Você deve colar os códigos a seguir após o fechamento dessa tag, ou seja, depois das chaves ( } ).

Barra de Rolagem

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
width:15px; /*Largura da barra de rolagem*/
 background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}

Altere as cores conforme indicado. Em Largura da barra de rolagem altere o valor de pixels para deixar a barra maior ou menos. Se não quiser bordas arredondadas, apague as partes destacadas em negrito. Salve e visualize suas alterações.

Seleção colorida

Procure por #base novamente e cole o código a seguir abaixo dessa tag, após a chave.

::-moz-selection {
background:#F7DFDD; /*Cor do fundo*/
color:#E49D98; /*Cor da fonte*/
}
::selection {
background:#F7DFDD;/*Cor do fundo*/
color:#E49D98; /*Cor da fonte*/
}

Altere as cores colocando as mesmas cores de fundo e de fonte nos lugares indicados. Salve e visualize. Deu certo? Então acabamos por aqui! 

Gostaram do resultado? :) Caso tenham dúvidas, é só perguntar.

Até mais!