Cuantas veces, hemos tratado de imitar el scroll que tiene Facebook, y para lograrlo hemos tenido que usar algún plugin de javascript que nos de la apariencia. Pero esto se acabó relativamente, en navegadores webkit como Google Chrome se puede personalizar mediante CSS3.
Además cada pseudo-elementos va unida a la descripción que mostramos en la siguiente imagen:
Para poder, reconocer mejor lo que hace cada pseudo-elemento del scroll, recomendamos codificar por parte los fragmentos de códigos para identificar los cambios en el navegador, siguiente el orden que presentamos en la figura anterior:
El código que vemos, aplica un ancho y color de fondo que ocupa el scroll:
El código que vemos, aplica un ancho y color de fondo que ocupa el scroll:
Aquí vemos, los estilos que se aplican a los botones del scroll, y además aplicamos el estado :active sobre ellos para cambiar de color:
Esto es el espacio que recorre el scroll, sin contar el espacio de los botones a diferencia del pseudoelemento ::webkit-scrollbar:
Esto es el espacio vacío que deja el scroll, para mayor entendimiento pueden cambiarle a background:red:
Y finalmente el scroll en si, hemos dado un efecto circular, y además que cuando se activa el :hover cambia de color:
Además aquí les dejo el código, para que puedan interactuar mucho más, espero que les haya gustado el aporte. Sigan compartiendo que muy pronto habrá más novedades.
No hay comentarios:
Publicar un comentario