12.6.15

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 :)

4 comentários:

  1. Oi, vou usar uma, posso mudar as cores??
    kisses ^^

    ResponderEliminar
  2. Eu nunca vi tanta barra de rolagem junta na minha vida antes. TODOS os modelos estão lindos. Ótimo trabalho Anilyan! Vou ver qual desses vou utilizar no layout free, mas claro sempre com créditos. Beijos ♥

    Bad Angel

    ResponderEliminar