27/12/2014

Modelos para Barra de Rolagem (Scrollbar)

Oi, oi docinhos! Vocês gostaram da personalização do blog??
Eu fui visitar o bloguito GNMH, lindo blog! E trouxe alguns modelinhos de barra de rolagem, são super fofos!



Modelo I - Preview
::-webkit-scrollbar-thumb:vertical {
background: #f9b1d1;
border-radius: 7px;
box-shadow: inset 1px 1px 0px #f28ebb;
height:50px;
}
::-webkit-scrollbar-thumb:horizontal {
background: #f9b1d1;
border-radius: 7px;
box-shadow: inset 1px 1px 0px #f28ebb;
height:50px;
 }
::-webkit-scrollbar {
height:10px;
width:8px; /*Largura da barra de rolagem*/
 background: #e3eacd; /*Cor da parte fixa, que fica no mundo*/
}


---------------------------------------------------------

Modelo II - Preview 
::-webkit-scrollbar-thumb:vertical {
background: #fbd0f3; /*Cor da barrinha que se move*/
box-shadow: inset 0 0 3px #f8bbed;
height:50px;
}
::-webkit-scrollbar-thumb:horizontal {
background: #fbd0f3; /*Cor da barrinha que se move*/
box-shadow: inset 0 0 3px #f8bbed;
height:50px;
 }
::-webkit-scrollbar {
height:10px;
width:8px; /*Largura da barra de rolagem*/
 background: #d1d8ec; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #; /*Coloque borda se quiser*/
}
---------------------------------------------------------

Modelo III - Preview
::-webkit-scrollbar-thumb:vertical {
background: #d8bfef; /*Cor da barrinha que se move*/
border: 1px solid #c8a9e5;
height:50px;
}
::-webkit-scrollbar-thumb:horizontal {
background: #d8bfef; /*Cor da barrinha que se move*/
border: 1px solid #c8a9e5;
height:50px;
 }
::-webkit-scrollbar {
height:10px;
width:8px; /*Largura da barra de rolagem*/
 background: #f9cfe9; /*Cor da parte fixa, que fica no mundo*/

2 comentários: