Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* Dar estilo a tu scrollbar
  Leído 10687 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: uge
Feb 14 2013
Bueno la scrollbar es la barrita de desplazamiento de los navegadores. Aclaro que este tutorial utiliza el código webkit por lo que sólo se visualiza en navegadores con dicho código osea, safari y google chrome.

Os dejo el primer estilo creado por mi. Sólo tenéis que añadir esto al final del index.css de vuestro tema:

Código: [Seleccionar]
/* ScrollBar by uge */

::-webkit-scrollbar
{
    width: 12px;
}
::-webkit-scrollbar-button
{   
background: #D8D8D8 url (../images/theme/scroollarriba.png);
height: 23px;

}
::-webkit-scrollbar-button:hover
{
background-color: #A4A4A4;
}
::-webkit-scrollbar-track
{
    background-color: #D8D8D8;
}
 ::-webkit-scrollbar-track-piece
{
background-color: #D8D8D8;
}
::-webkit-scrollbar-thumb
{
background: #A4A4A4;
height: 50px;
}
::-webkit-scrollbar-thumb:hover
{
background: #585858;
}

/* Final ScrollBar by uge */

Por último pasamos esta imágen a images/theme.

Imágen: http://www.smfpersonal.net/downloads.html;sa=view;down=382

El resultado será este:

*


Además os dejo el otro código de la otra barra que encontré por internet:

Sólo añadiréis esto al final de vuestro index.css:

Código: [Seleccionar]
/* ScrollBar */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: #000000;
-webkit-border-radius: 10px;
border-radius: 10px;
}

::-webkit-scrollbar-track-piece {
background-color: #000000;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #EB8A1D;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
background: #EB8A1D;
}

/* Final ScrollBar */

El resultado será este:
*


Ahora os pondré una imágen que os explicará cada una de las partes de la scrollbar. Sabiendo esto y con un css mínimo podéis hacer vosotros la que queráis.

::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

*


Y los estados del scrollbar:

También son llamadas pseudo-clases. Con ellas puedes hacer referencias a secciones más especifícas de los scrollbar y aplicarles efectos personalizados. Por ejemplo, con estas pseudo-clases puedes seleccionar solamente los scrollbars horizontales, los botones de incremento o decremento, etc. Son:

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive


« Última Modificación: Febrero 14, 2013, 07:02:56 am por uge »



Muy buen aporte!!

Aunque estaria mas completo si dejaras uno para los otros navegadores +10



uge

Es que en mozilla firefox según he leído es muy difícil de lograr (no basta sólo con simple css), internet explorer creo que se podría también con css pero no me he puesto a averiguarlo. Puse la de chrome porque es el que uso yo XD.




Buen tuto buen tuto +10 los demas tambien deben de tomar estos cambios

Saludos enik...




Funciona super bien :)




Muy buen tuto. Pregunta, agregándole:
.scrollbar
-moz-scrollbar
 serviría ya para firefox y el explorer?



uge

Para explorer sería cuestión de probar. Para mozilla leí que es imposible lograr cambiar el scrollbar porque su código no lo permitía.




Yaa, no sabía eso O.O Igual está genial, aunke sea sólo para el crhome. Grax por compartirlo! +10
Saludos!




Una pregunta:
¿Solo es una imagen o son varias?
Un saludo!



uge

Si te refieres a las flechas de mi modificación es sólo una imágen




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,