Modelos para barra de rolagem

Aha, julgavam que se livravam de mim? Nap ^^ Tenho estado mesmo muito ocupada, e caso alguém aí ainda não saiba, já é difícil manter a quantidade enorme de blogs que tenho, assim como todos os meus outros projetos. Mas apareço em cada um deles sempre que a escola me permite :) O que trago hoje é um post sobre a barra de rolagem. É uma coisa fácil de personalizar, mas como parece que nem toda a gente se lembra disso, cá estão alguns modelinhos diferenciados, dos quais podem mudar facilmente as cores. Cliquem no link para visualizar a imagem. A personalização mais simples, assim como o tutorial, estão {NESTE POST}

• Modelo 1: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #d8deaf;
box-shadow: inset 0px 0px 3px #cbd498;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
}
::-webkit-scrollbar { /*barra vertical fixa*/
border: 3px solid #fff;
margin-right: 5px;
width: 10px;
background: #de8d87;
}

• Modelo 2: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
border: #ffd6de 1px solid;
box-shadow: inset 1px 1px 0 #fff5f7;
background: #ffe2e8;
background: -moz-linear-gradient(top,  #ffe2e8 0%, #fff2f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe2e8), color-stop(100%,#fff2f4));
background: -webkit-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: -o-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: -ms-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: linear-gradient(to bottom,  #ffe2e8 0%,#fff2f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe2e8', endColorstr='#fff2f4',GradientType=0 );
-webkit-transition-duration: .50s;
}
::-webkit-scrollbar-thumb:vertical:hover { /*barra vertical que se move*/
border-radius: 3px;
border: #c7d4df 1px solid;
box-shadow: inset 1px 1px 0 #f2f5f7;
background: #d0dbe4;
background: -moz-linear-gradient(top,  #d0dbe4 0%, #e8edf2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(100%,#e8edf2));
background: -webkit-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -o-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -ms-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: linear-gradient(to bottom,  #d0dbe4 0%,#e8edf2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#e8edf2',GradientType=0 );
-webkit-transition-duration: .50s;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: #d4a498;
}

• Modelo 3: www (as flores laterais foram adicionadas como uma cortina, já ensinei aqui no blog)

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #bda9a4;
border-radius: 0px;
border-bottom: 3px solid #5285a1;
border-top: 3px solid #5285a1;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: #a5c9d1;
}

• Modelo 4: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #b8a497;
border-left: 3px solid #a8958a;
border-bottom: 3px solid #a8958a;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: #cfbcb0;
}

• Modelo 5: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3wCPWRdOQZ7zZsDWn73Zy2No0RECwJj-MLeDFQAqYa68BEH2wK6kJKmtibibsbeU7y3jGgIAqYJAeb-vd35XXcjZfl16FHLjbjC21nhNFbxYX1lNYai_bxmGK3-tOr_hJY8oxFhEB6gn/s1600/fundorolagem2.png) repeat;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMC6Gy14NyctVQJs6EeQlGikZnDs11L_MUOJi3ATDG_kTjp9YjKfKYnztRhcE2sPREwVX_TuZ13tcYUHWMpMShWwcQrhV7y50VlK-wUFDk2jEhSa-19cH9gxQo4hrZYXat5XrUyFevtqLc/s1600/fundorolagem.png) repeat;
}

• Modelo 6: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #cdb8d9;
box-shadow: inset 5px 0px 0px 0px #f0dcfc;
border-top: 3px solid #ffd29e;
border-bottom: 3px solid #ffd29e;
}
::-webkit-scrollbar-thumb:vertical:hover { /*barra vertical que se move*/
background: #a373bf;
box-shadow: inset 5px 0px 0px 0px #cfa0eb;
border-top: 3px solid #ffbe63;
border-bottom: 3px solid #ffbe63;
}

• Modelo 7: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #e0ebae;
border-top: 3px solid #f0807d;
border-bottom: 3px solid #f0807d;
border-left: 1px solid #d1bb9b;
box-shadow: inset 6px 0px 0px 0px #d2e3a1;
}
::-webkit-scrollbar-thumb:vertical:hover { /*barra vertical que se move, com o mouse*/
border-top: 3px solid #bad9d7;
border-bottom: 3px solid #bad9d7;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 12px;
border-left: 1px solid #d1bb9b;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib7sZ5X1-Uf1PPtWrRg2R9_nNPDfkS527cuTtA_i10TWzSga-O_aKcXTLywMvMxSRB_2lNOumISjXfCZB4lHSnvXJshV9q5lKqomhDAwRm_jciqn2yPHf2fzGB39K20oRjRE61LCkDgHcu/s1600/fundorolagem.png) repeat;
}

• Modelo 8: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #CD5555;
border: 0px solid #bgh;
border-radius: 5px;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width:15px;
background: #FF6A6A;
border: 1px dashed #8B3A3A;
}

• Modelo 9: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsezUKYRW9LOXzhsGHn9LYoTdJILCb2l75_gKax82axlyVDyHthUHNGz89I5FVu3PC-4H7nJO03nPV0NzhHh3VHEjVu3jYqplqXcpPDWnjzXUKCVsLrab-EcIRwQZT4iWGhFIn-XzHoI-I/s1600/fundoriscas.png) repeat;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
border-radius: 0px; /*aumente o número para arredondar os cantos */
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: #ebdeda;
}

• Modelo 10: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #bccfcf;
border: 2px solid #f7f5f2;
border-right: 4px solid #f7f5f2;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: #f7f5f2;
}

• Modelo 11: www

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/
background: #ab3537;
border-top: 4px solid #994058;
border-bottom: 4px solid #994058;
box-shadow: inset 0px 0px 5px #853438;
border-radius: 5px;
}
::-webkit-scrollbar { /*barra vertical fixa*/
width: 10px;
background: #d4b068;
box-shadow: inset 0px 0px 5px #b58950;
}

É tudo por hoje :)