Personalizando el Scroll Bar

hOla blogueritas hoy vamos a personalizar nuestro scroll bar de 2 maneras que les parece ^^ se mira muy bonito verdad n.n una sera con colores y el otro con fondos o backgrounds de las 2 formas se mira muy bien.

oka empezemos ^^

Scroll Bar con 2 colores:

Nos vamos a

Diseno Edicion de Html Editar Plantilla

Pulsamos Ctrl + la tecla "F" y buscamos ]]></b:skin>

Pegamos el siguiente codigo justo arriba de ]]></b:skin>

::-webkit-scrollbar {

height: 12px;

width: 15px;

background: #FA58D0;

}

::-webkit-scrollbar-thumb {

background: #00BFFF;

-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;

}

quedando asi:

moradito: la forma del scroll bar

Rosita: Codigo del color

Dar vista previa y guardar.

Scroll Bar con 2 fonditos o backgrounds

igual nos vamos a:

Diseno Edicion de Html Editar Plantilla

Pulsamos Ctrl + la tecla "F" y buscamos ]]></b:skin>

Pegamos el siguiente codigo justo arriba de ]]></b:skin>

::-webkit-scrollbar {

height: 12px;

width: 15px;

background-image:url(URL DEL FONDO);

}

::-webkit-scrollbar-thumb {

background-image:url(URL DEL FONDO);

-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;

}

moradito: la forma del scroll bar

Verde: direccion o url del fondo

Luego dar vista previa y guardar.

Aqui les pondre la forma que pueden darle al scroll bar

Forma 1:

-Moz-border-radius: 5px; border-radius: 5px;

Forma 2:

-Moz-border-radius-bottomRight: 50px 25px; border-bottom-right-radius: 50px 25px; -Moz-border-radius-topLeft: 50px 25px; border-top-left-radius: 50px 25px;

Forma 3:

-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;

Forma 4:

-Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;

Ahora si le quieres agregar un Borde a la forma del scroll bar como este ejemplo

Solo agregale este codigo abajo de ::-webkit-scrollbar-thumb {

border: 2px dashed #190707;

quedando asi:

bordes

creo que es todo xD espero les haya gustado el tutorial y me dejen sus comentarios n.n