4 nuevos estilos de scrollbar ! ♡

 

Buenas! Les traigo 4 modelos de scrollbars personalizables, recuerden que pueden personalizar los colores a gusto en esta página HTML Color ⸜(｡˃ ᵕ ˂ )⸝

Tema > Editar HTML > Ctrl + F y buscas ]]></b:skin>

Arriba pegas el código del scroll que prefieras

ESTILO 1

::-webkit-scrollbar {

width: 15px;

height: 15px;

}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

height: 15px;

width: 15px;

background: #FFD0DA ;

border: 3px solid #FFFFFF;

-moz-border-radius: 100%;

border-radius: 100%;

}

::-webkit-scrollbar-track-piece {

background-color: #FFD0DA;

border: 7px solid #FFFFFF;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color: #FFD0DA;

background-image:url(http://www.dolliehost.com/dolliecrave/backgrounds/yummy/55.gif);

background-size:300%;

}

ESTILO 2

::-webkit-scrollbar {

width: 15px;

height: 15px;

}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

height: 15px;

width: 15px;

background: #FFB4B4;

}

::-webkit-scrollbar-track-piece {

background-color: #D1F7B6;

border: 6px solid #FFFFDF;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color: #FFFFFF;

background-image:url(http://www.dolliehost.com/dolliecrave/backgrounds/stripes2/232.gif);

background-size:500%;

background-position:0% 0%;

}

::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:horizontal:hover {

background-size:100%;

}

ESTILO 3

::-webkit-scrollbar {

width: 15px;

height: 15px;

}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {

height: 15px;

width: 15px;

border-radius:10px;

background:url(http://www.dolliehost.com/dolliecrave/backgrounds/plaincolor/71.gif);

border: 2px solid #FFFFD7;

}

::-webkit-scrollbar-track-piece {

background-color: #FFFFD7;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color:#FFFFFF;

background-image:url(http://www.dolliehost.com/dolliecrave/backgrounds/plaincolor/71.gif);

border: 3px solid #FFFFD7;

}

ESTILO 4

::-webkit-scrollbar {

width: 15px;

height: 15px;

background-color:#FFFFFF;

}

::-webkit-scrollbar-button:end:increment {

background-image:url(http://www.dolliehost.com/dolliecrave/scrollbars/arrowdown.png);

background-repeat: no-repeat;background-position:center;

box-shadow: inset 0 0 2px 1px #DDDDDD;

}

::-webkit-scrollbar-button:start:decrement {

background-image: url(http://www.dolliehost.com/dolliecrave/scrollbars/arrowup.png);

background-repeat: no-repeat;background-position:center;

box-shadow: inset 0 0 2px 1px #DDDDDD;

}

::-webkit-scrollbar-thumb {

background-color:#E5CBFF;

border:0px solid #E5E5E5;

border-radius:0px;

}

::-webkit-scrollbar-track {

background:#FFFFFF;

border-radius:0%;

box-shadow: inset 0 0 2px 1px #DDDDDD;

}

Azul: Colores a editar.

Rojo: links de los fonditos.

Byebye ! ♡