Si bien no creo en los estándares absolutos ni me preocupan cosas como la validación de las páginas o las reglas rígidas de la W3C, creo que debemos intentar que nuestro sitio se vea lo mejor posible sin importar el navegador o el sistema operativo que utilicen los visitantes. Claro, eso no siempre es posible pero, hay que intentarlo.
Es por eso que no me gusta utilizar códigos que sólo funcionen en ciertos navegadores, ni los de IE ni los de Firefox y lo cierto, es que ambos los tienen. Incomprensiblemente, algunos de ellos podrían ser aplicados genéricamente pero, la guerra es la guerra.
Pero, una cosa es lo que yo pienso y otra lo que piensan los demás así que, como hay muchas preguntas sobre ciertos códigos o propiedades que no son genéricas sino exclusivas, este sería el primero de una serie de post para explicar algunas de las más comunes.
En Internet Explorer las barras de desplazamiento pueden ser personalizadas utilizando CSS. Por defecto, tienen un estilo que es establecido por el tema que usemos pero podemos modificarlas tanto de manera general (para toda la página) o para determinado elemento (por ejemplo, un textarea).
Es por eso que no me gusta utilizar códigos que sólo funcionen en ciertos navegadores, ni los de IE ni los de Firefox y lo cierto, es que ambos los tienen. Incomprensiblemente, algunos de ellos podrían ser aplicados genéricamente pero, la guerra es la guerra.
Pero, una cosa es lo que yo pienso y otra lo que piensan los demás así que, como hay muchas preguntas sobre ciertos códigos o propiedades que no son genéricas sino exclusivas, este sería el primero de una serie de post para explicar algunas de las más comunes.
En Internet Explorer las barras de desplazamiento pueden ser personalizadas utilizando CSS. Por defecto, tienen un estilo que es establecido por el tema que usemos pero podemos modificarlas tanto de manera general (para toda la página) o para determinado elemento (por ejemplo, un textarea).
Click para ver ejemplos (sólo Internet Explorer)
| scrollbar-3dlight-color: #FFEEDD; scrollbar-arrow-color: navy; scrollbar-base-color: #FFFFF0; scrollbar-darkshadow-color: #FF9966; scrollbar-face-color: gold; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #000000; | |
| scrollbar-highlight-color: darkgray; scrollbar-arrow-color: #DAA520; scrollbar-base-color: gray; scrollbar-darkshadow-color: gray; scrollbar-track-color: gray; | |
| scrollbar-3dlight-color: #00FF00; scrollbar-arrow-color: #00FF00; scrollbar-darkshadow-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #00FF00; scrollbar-shadow-color: #00CC00; scrollbar-track-color: #00CC00; | |
| scrollbar-3dlight-color: #F7F9FB; scrollbar-arrow-color: #70737B; scrollbar-darkshadow-color: #F7F9FB; scrollbar-highlight-color: #70737B; scrollbar-face-color: #F7F9FB; scrollbar-shadow-color: #70737B; scrollbar-track-color: #F7F9FB; | |
| scrollbar-3dlight-color: #101214; scrollbar-arrow-color: #000000; scrollbar-darkshadow-color: #101214; scrollbar-face-color: #7E898B; scrollbar-highlight-color: #C3C8C9; scrollbar-shadow-color: #7E898B; scrollbar-track-color: #101214; | |
Hay ocho propiedades que controlan las barras, cada una de ella define el color de una parte.
- scrollbar-3dlight-color y scrollbar-highlight-color son el ángulo superior izquierdo de los botones, generalmente los más claros
- scrollbar-darkshadow-color y scrollbar-shadow-color son el ángulo inferior derecho de los botones, generalmente los más oscuros
- scrollbar-arrow-color es el color de las flechas de desplazamiento
- scrollbar-base-color es el color general (las demás quedan al tono)
- scrollbar-face-color es el color de los botones
- scrollbar-track-color es el color de la base de deslizamiento
Las propiedades las podemos agregar a nuestra hoja de estilo o utiliza el atributo STYLE; del mismo modo que el resto de las propiedades CSS, podemos acceder a ellas usando JavaScript, en este caso, las variables asignadas a cada atributo son las siguientes:
scrollbar3dLightColor = scrollbar-3dlight-color
scrollbarHighLightColor = scrollbar-highlight-color
scrollbarDarkShadowColor = scrollbar-darkshadow-color
scrollbarShadowColor = scrollbar-shadow-color
scrollbarArrowColor = scrollbar-arrow-color
scrollbarBaseColor = scrollbar-base-color
scrollbarFaceColor = scrollbar-face-color
scrollbarTrackColor = scrollbar-track-color
scrollbar3dLightColor = scrollbar-3dlight-color
scrollbarHighLightColor = scrollbar-highlight-color
scrollbarDarkShadowColor = scrollbar-darkshadow-color
scrollbarShadowColor = scrollbar-shadow-color
scrollbarArrowColor = scrollbar-arrow-color
scrollbarBaseColor = scrollbar-base-color
scrollbarFaceColor = scrollbar-face-color
scrollbarTrackColor = scrollbar-track-color
Lograr una combinación de colores adecuada suele ser complejo pero, hay una forma sencilla de hacerlo, establecer sólo la propiedad scrollbar-base-color ya que funciona como "combinador" del resto de los atributos.
| rojo amarillo verde azul |
Este es un pequeño ejemplo donde se pueden experimentar las posibilidades que ofrecen estas propiedades. Seleccionando los colores para cada una de ellas, el botón MOSTRAR hará que se vea el ejemplo concreto en el textarea y se escribirá el código necesario a incluir en el estilo.
NOTA: Como sólo es una demostración, colocando un valor no admitido generará un error que habrá que ignorar y corregir.
NOTA: Como sólo es una demostración, colocando un valor no admitido generará un error que habrá que ignorar y corregir.
8 comentarios:
Holas.. He intentado de todo pero no me funciona cambiar los colores de la brra de despalzamiento en blogger, a que se debe?
Pués ahí la veo perfectamente; es gris con bordes negros. Recuerda que sólo es visible en Internet Explorer.
Hola Jmiur, me gustaria saber si en estos listados con barra de desplazamiento, se puede hacer que las palabras que tienes en la lista, al pasar el ratón por encima de ellas muestre una pequeña imagen tipo thumbnail alineada a la derecha dejando ver la palabra que señalas.
Espero haberme explicado bien, y que encuentres la solución.
Gracias
Iradai:
No, no comprendo bien la pregunta :D
En términos generales, sobre cualquier palabra podría hacerse algo similar, mostrar un tooltip personalizado.
¿Puede ser que tu idea sea algo como lo que se muestra en este post?
Hola Jmiur, la idea que quiero conseguir es, en mi blog (http://www.buscandopelis.blogspot.com/)tengo un listado de películas y me gustaria que al poner el cursor encima aparezca la carátula alineada a la derecha para que deje ver el nombre de la peli. El efecto que quiero conseguir es el mismo que tengo con el nombre de los actores, que pasas por encima y se ve la cara.
No sé aplicarlo en el listado de pelis.
Espero haberme explicado mejor :D
Gracias
Iradai:
Está claro. Allí estás usando agún script ¿verdad? Supongo que podrías usar el mismo, l oque ocurre es que no sé cuál es, necesitaría verlo con detalle. Una cosa que veo es que si se trata de la lista de películas de la sidebar, esas también son enlaces y deberían seguir siéndolo. La de los actores, no lo son. Fíjate que ocurre cuando haces click en algunos de los actores si no se está logueado en Blogger.
Algunos scripts contemplan las dos posibildiades y otros no, por eso necesitaría verlo o saber donde lo conseguiste para tratar de entenderlo.
Te mandaré al correo los códigos para ver si puedes fusionarlos.
Recibí tu mail. Voy a mirar a ver si es posible hacer algo.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...