martes, julio 29, 2014

Edita tu Scrollbar Modelo-1


Holaa! Hoy Les Enseñaré Un Modelo Para El Scrollbar Super Bonito & Sencillo. Como Este:



Primero Vamos A...

Plantillas Blogger: Pega El Siguiente Código Justo Arriba De  ]]></b:skin>

Plantillas Clásicas/Blogskin: Pega El Siguiente Código Justo Arriba De </style>

::-webkit-scrollbar {
width: 20px;
height: 7px;
background-color:#ffffff;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {display: block;}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {display: none;}
::-webkit-scrollbar-button:end:increment
{
background-image:url(http://www.dolliehost.com/dolliecrave/scrollbars/arrowdown.png);
background-repeat: no-repeat;background-position:center;
        -webkit-box-shadow: inset 0 0 16px rgba(214,214,214,0.9);}

::-webkit-scrollbar-button:start:decrement
{background-image: url(http://www.dolliehost.com/dolliecrave/scrollbars/arrowup.png);
background-repeat: no-repeat;background-position:center;
        -webkit-box-shadow: inset 0 0 16px rgba(214,214,214,0.9);}
::-webkit-scrollbar-thumb {
background-color:transparent;
        -webkit-box-shadow: inset 0 0 16px rgba(192,192,192,0.9);
        background:url(URL-IMAGEN-SCROLLBAR);
        background-size: 300% auto;
border-left:0px solid #E5E5E5;
border-right:0px solid #E5E5E5;
border-bottom:0px solid #E5E5E5;
border-top:0px solid #E5E5E5;
border-radius:0%;
}
#scrollbardolliecrave {
width:96px;
height:20px;
position: fixed;
left: 0px;
bottom: 0px;
}
::-webkit-scrollbar-track {
        background:url(URL-IMAGEN-FONDO-SCROLLBAR);
border-radius:0%;
}


Terminas De Editar, Guardas & Listo!!

No hay comentarios:

Publicar un comentario