Scrollbars personalizadas con CSS y Webkit

Personalizar los scrollbars (o barras de desplazamiento) con el diseño de la interfaz de tu sitio web agrega un valor extra a tu sitio web. Mediante pseudo-elementos de CSS, puedes cambiar el estilo de las scrollbars de tu sitio web con estilos totalmente personalizados. En este tutorial, te mostraremos como llevarlo a cabo con CSS y Webkit.

Webkit te permite diseñar scrollbars mediante CSS personalizado. Solo basta con definir el pseudo-elemento para la scrollbar y Webkit desactivará su estilo integrado, para utilizar el que le acabas de proporciona en CSS mediante el elemento ::-webkit-scrollbar.

En este tutorial te proporcionaremos un pequeño snippet de CSS para que puedas cambiar el estilo por defecto de tu scrollbar y crear una barra de desplazamiento totalmente personalizada. Para ello utilizaremos solo 3 pseudo-elementos de Webkit: webkit-scrollbar, webkit-scrollbar-track y webkit-scrollbar-thumb. Utiliza el siguiente CSS en tu sitio web para crear barras de desplazamiento totalmente personalizadas.

Estilo 1:

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Estilo 2:

::-webkit-scrollbar{
    width: 12px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #CCCCCC;
}
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.4) 50%,transparent,transparent)
}

Estilo 3:

::-webkit-scrollbar{
    width: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
    background-color: #F90; 
    background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)
}

En este snippet de ejemplo solo hemos utilizado estilos básicos para personalizar nuestra barra de desplazamiento. Te animamos a que personalices tus scrollbars con el diseño de la interfaz de tu sitio web.

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.