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>
<!–
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.

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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: