HTML    •    CSS

Introducción a las CSS.
Formas de aplicar CSS I.
Formas de aplicar CSS II.
Pseudoclases.
Unidades de medida.
Estilos de fuentes.
Estilos de párrafos.
Estilos de fondo.
Estilos de bordes.
Margin y Padding.
Float y Clear.
Position, left y top.
Width y height.
Altura de las capas.
Visibility y display.
Overflow.
Scrollbar.
Inicio > Curso de CSS (hojas de estilo) > Scrollbar.

Scrollbar.

La etiqueta css “scrollbar” es una excelente forma de darle un toque personalizado a nuestra página web de una forma sencilla. Gracias a esta etiqueta podemos cambiar el color de la barra desplazadora y configurar totalmente los colores de la misma.

Esta etiqueta deberemos incluirla entre las etiquetas <head> </head>. Vamos a ver cuál sería el código que tendríamos que utilizar:

<style type="text/css">
<!--
body {
scrollbar-face-color: #6685CA;
scrollbar-highlight-color: #6685CA;
scrollbar-shadow-color: #6685CA;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#E5E5E5;
scrollbar-drakshadow-color:#000000;
}
-->
</style>

A continuación vamos a explicar las diferentes partes de la etiqueta. Cada una de las partes cambia el color de un elemento de la barra, por lo que es acertado conocerlas todas, para así poder personalizar la barra a nuestro gusto. Hemos acompañado la explicación con un dibujo, para que todo quede más claro. Pincha en la imagen para hacerla más grande.

  • scrollbar-face-color – Indica el color de la base de la barra desplazadora.
  • scrollbar-highlight-color - Indica el color resaltado de la barra desplazadora.
  • scrollbar-shadow-color - Indica el color de la sobra de la barra desplazadora.
  • scrollbar-3dlight-color - Indica el color del relieve de la barra desplazadora.
  • scrollbar-arrow-color - Indica el color de las flechas de la barra desplazadora.
  • scrollbar-track-color - Indica el color del fondo de la barra desplazadora.
  • scrollbar-drakshadow-color - Indica el color de la sobra más oscura de la barra desplazadora.
Pincha en la imagen para ampliar

Por último, diremos que la “scrollbar” sirve tanto para el navegador, como para los formularios y que esta barra sólo la reconoce el navegador explorer.

<< Overflow.

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.  


© HazUnaWeb.com. Tutoriales y manuales de programación y diseño de páginas web. :: Contacto :: Aviso legal
Queda absolutamente prohibida la copia o reproducción total o parcial de los contenidos de este página.