Si quieres añadir una barra de desplazamiento a tu página de Batatabit sólo usando CSS, sigue los siguientes pasos:
Con el siguiente código añades el pseudo-elemento scrollbar.
Por el momento no verás nada ya que no tiene color la barra de desplazamiento, para eso usa el siguiente código. Este pseudo-elemento también se conoce como thumb. En este caso, decidí añadir un gradiente entre color transparente y el --bitcoin-orange. También usé un box-shadow para resaltar. Por último, puse un pequeño redondeo en sus esquinas para estilizar.
Luego, puedes añadirle estilos al pseudo-elemento track, que contiene al thumb. En mi caso, decidí sólo redondear un poco las esquinas y añadirle un sombreado.
Finalmente como guinda del pastel, puedes añadir un efecto cuando hagas hover sobre la barra de desplazamiento o thumb. En mi caso, cambié su color a un gradiente que va desde transparente hasta negro.
Al final tendrás lo siguiente:
Y cuando hagas hover:
Escribe tu comentario
+ 2
Entradas relacionadas
1
Agregar los botones para mover las tarjetas con Scroll desde JavaScript
Este es el resultado visualmente
Para realizar esto agregué un par de lineas en el código original
Primero, dentro del archivo index.html
zayelmech
9
Tips para realizar cursos prácticos
Me gustaría compartir con ustedes algunos tips y técnicas que aprendí o desarrolle personalmente para poder aprovechar al máximo estos curso
JavierReivajGomez
2
Como ver tu pagina en tiempo real?
Paso 1. Instalar Visual Studio Code
Paso 2. En la parte de extensiones buscar live server.
Paso 3. Instalar la extension.
Paso 4. Abrir una
viracacha
49
🚀 Cómo implementar BEM en tus proyectos Front-End
¿Te has sentido frustrado cuando tus proyectos front-end comienzan a crecer y no sabes por dónde deberías comenzar? Imagina poder tener el c
