Personalizando las barras de scroll del navegador
Escrito por Mauro Rondinelli el Lunes 11 de Junio de 2001 a las 00:00hs
Mediante el uso de CSS (hojas de estilo) podemos obtener barras de scroll realmente atractivas, aqui un ejemplo...
Estas barras siguen funcionando igual que las anteriores lo unico que se modifica es su aspecto, veamos como llegamos a esto...
<style type="text/css">
<!--
body {
SCROLLBAR-FACE-COLOR:#6699CC;
SCROLLBAR-HIGHLIGHT-COLOR: #6699CC;
SCROLLBAR-SHADOW-COLOR: #6699CC;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #E3E3E3;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
-->
</style>
Este codigo hay que insertarlo entre las etiquetas HEAD o en la hoja de estilo que utilizemos, ahora explicaremos que significa cada item...
- SCROLLBAR-FACE-COLOR - Color de la base de la barra.
- SCROLLBAR-HIGHLIGHT-COLOR - Color resaltado de la barra.
- SCROLLBAR-SHADOW-COLOR - Color de la sobra de la barra.
- SCROLLBAR-3DLIGHT-COLOR - Color del relieve de la barra.
- SCROLLBAR-ARROW-COLOR - Color de las flechas de la barra.
- SCROLLBAR-TRACK-COLOR - Color del fondo de la barra.
- SCROLLBAR-DARKSHADOW-COLOR - Color de la sobra mas oscura de la barra.
Lo que te recomiendo es que vayas cambiando los valores de los colores y que pruebes como va quedando.
comentarios
-
Hola. Ese control de las barras de desplazamiento con css es muy bueno. Pero tengo una duda, ¿si quiero poner una barra de desplazamiento sólo a una celda? Ya que en el codigo css pone "body", es decir las barras de todo el documento, si cambio eso por "td" el código de celda no funciona, por favor, respóndame, gracias.
-
unamiguete:
no funciona porque las tds no tienen scroll. Esto sólo te vale para los elementos con scroll, textareas, div, etc..
-
Hola y gracias,
he tratado de insertar este codigo de las barras de desplazamiento
en internet explorer 6. Me da error por explorer 5.0, 5.5, y 60,
No funciona.
Imagino que existe una alternativa javascript o algo más.
Explorer me dice que esta etiqueta no es válida.