Hoy les enseñaré a personalizar las scrollbars (barras de desplazamiento) de nuestro blog.
Como dice en el título, este truco sólo afecta a Google Chrome y Safari, ya que se utiliza una propiedad que sólo se aplica en estos navegadores.
Lo único que se necesita es aplizar el CSS, que como ya sabemos, se pega justo antes de ]]></b:skin>
Acá un esquema para poder ubicarse mejor:
Se pueden agregar toda clase de estilos: color, borde, resplandor, etc.
Un ejemplo de estilos sería así:
Más información en: Custom Scrollbars in WebKit (Inglés)
Espero que sea útil este tutorial, Chao...
Como dice en el título, este truco sólo afecta a Google Chrome y Safari, ya que se utiliza una propiedad que sólo se aplica en estos navegadores.
Lo único que se necesita es aplizar el CSS, que como ya sabemos, se pega justo antes de ]]></b:skin>
::-webkit-scrollbar {
Estilos...
}
::-webkit-scrollbar-thumb {
Estilos...
}
::-webkit-scrollbar-button {
Estilos...
}
::-webkit-scrollbar-track {
Estilos...
}
::-webkit-scrollbar-corner {
Estilos...
}
Estilos...
}
::-webkit-scrollbar-thumb {
Estilos...
}
::-webkit-scrollbar-button {
Estilos...
}
::-webkit-scrollbar-track {
Estilos...
}
::-webkit-scrollbar-corner {
Estilos...
}
Acá un esquema para poder ubicarse mejor:
Se pueden agregar toda clase de estilos: color, borde, resplandor, etc.
Un ejemplo de estilos sería así:
::-webkit-scrollbar {
width: 16px;
background:white;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
width: 16px;
background:white;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Más información en: Custom Scrollbars in WebKit (Inglés)
Espero que sea útil este tutorial, Chao...
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarDe nada by:valiitOp kawaii♥. Que suerte que haya servido
Eliminarsiii que me sirvio!
Eliminar