Podemos cambiar los colores de la barra de scroll en Internet Explorer (digo Internet Explorer porque simplemente solo funciona para este navegador, los demás no dejan cambiar el color de la barra de scroll) mediante este sencillo código, pero claro, primero vamos a descrifrarlo y ver que quiere decir cada cosa:

scrollbar-arrow-color = color de la flecha
scrollbar-base-color = color de la base
scrollbar-dark-shadow-color = sombra del primer plano
scrollbar-track-color = color del fondo de la barra.

scrollbar-face-color = color del primer plano.
scrollbar-shadow-color = color de la sombra del fondo.
scrollbar-highlight-color = luz del cuadro de la flecha
scrollbar-3d-light-color = luz 3D.

Ahora que ya hemos traducido lo que significa cada cosa, el código CSS añadir sería este:

<style type="text/css">
body {
scrollbar-arrow-color: white;
scrollbar-base-color: white;
scrollbar-dark-shadow-color: #000080;
scrollbar-track-color: #0080C0;
scrollbar-face-color: #000080;
scrollbar-shadow-color: white;
scrollbar-highlight-color: white;
scrollbar-3d-light-color: a;
}
</style>

No olvidemos meter este código entre body {}, como viene por defecto, claro está.

También tenemos generadores online para cambiar la barra de scroll, mucho más cómodo, aunque lo mejor sería poner el código por nuestra cuenta aprendiendo con esta entrada.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• ¿Degradados o colores planos?

• Deshabilitar scroll mediante CSS

• Forzar la barra de desplazamiento vertical con CSS

En esta entrada os mostraremos como crear distintos tipos de barras gráficas mediante el uso de CSS. Estas gráficas pueden ser muy útiles para mostrar la evolución de algo, además, no se requiere ninguna imagen, lo que a Google le gusta y acelera la carga del sitio web. Ya os enseñamos a crear una barra animada tiempo atrás.

Empezemos:

1. Simple barra gráfica

Una barra gráfica horizontal con porcentaje, para aplicarlo, deberemos incluir este código CSS:

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

Y este código HTML:

<div class="graph">
<strong class="bar" style="width: 24%;">24%</strong>
</div>

El porcentaje se puede cambiar modificando el width de <strong> y el número en porcentaje que rodea dicha etiqueta (Ahora mismo es 24%).

Podemos ver un ejemplo de este tipo de gráfica aquí:

Ejemplo de barra gráfica simple

2. Barra CSS compleja

Esta barra, como se puede observar en la imagen, goza de una compleja visualización, por lo que es más complicada construirla. Para crearla.

El código CSS a implementar sería:

dl {
        margin: 0;
        padding: 0;
    }
    dt {
        position: relative; /* IE is dumb */
        clear: both;
        display: block;
        float: left;
        width: 104px;
        height: 20px;
        line-height: 20px;
        margin-right: 17px;
        font-size: .75em;
        text-align: right;
    }
    dd {
        position: relative; /* IE is dumb */
        display: block;
        float: left;
        width: 197px;
        height: 20px;
        margin: 0 0 15px;
        background: url("g_colorbar.jpg");
     }
     * html dd { float: none; }
    /* IE is dumb; Quick IE hack, apply favorite filter methods for
    wider browser compatibility */

     dd div {
        position: relative;
        background: url("g_colorbar2.jpg");
        height: 20px;
        width: 75%;
        text-align:right;
     }
     dd div strong {
        position: absolute;
        right: -5px;
        top: -2px;
        display: block;
        background: url("g_marker.gif");
        height: 24px;
        width: 9px;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden;
     }

El código HTML:

<dl>
    <dt>Love Life</dt>
    <dd>
        <div style="width:25%;"><strong>25%</strong></div>
    </dd>
    <dt>Education</dt>
    <dd>
        <div style="width:55%;"><strong>55%</strong></div>
    </dd>
    <dt>War Craft 3 Rank</dt>
    <dd>
        <div style="width:75%;"><strong>75%</strong></div>
    </dd>
</dl>

Se puede ver un ejemplo de su funcionamiento.

3. Barra vertical

Otro tipo de barras gráficas son las barras verticales. Para crearlas, deberemos añadir este código CSS a nuestro documento:

   #vertgraph {
        width: 378px;
        height: 207px;
        position: relative;
        background: url("g_backbar.gif") no-repeat;
    }
    #vertgraph ul {
        width: 378px;
        height: 207px;
        margin: 0;
        padding: 0;
    }
    #vertgraph ul li {
        position: absolute;
        width: 28px;
        height: 160px;
        bottom: 34px;
        padding: 0 !important;
        margin: 0 !important;
        background: url("g_colorbar3.jpg") no-repeat !important;
        text-align: center;
        font-weight: bold;
        color: white;
        line-height: 2.5em;
    }

    #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
    #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
    #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
    #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
    #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }

El código HTML sería:

<div id="vertgraph">
    <ul>
        <li class="critical" style="height: 150px;">22</li>
        <li class="high" style="height: 80px;">7</li>
        <li class="medium" style="height: 50px;">3</li>
        <li class="low" style="height: 90px;">8</li>
        <li class="info" style="height: 40px;">2</li>
    </ul>
</div>

Ya estaría lista la barra.

Se puede ver un ejemplo de su funcionamiento.

Vía | Apples to Oranges

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• CSS Position Fixed para IE6

• Gráficas prefabricadas en CSS

• Un lapiz que dibuja solo con CSS

Una técnica muy sencilla para crear barras de progreso animadas, utilizando solamente 3 elementos, un contenedor y 2 elementos anidados.

Es muy fácil personalizarla, y utilizarlas en nuestros proyectos.

Ver demo de la barra animada

Descargar la barra animada

Más información

Vía | Xybernéticos

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Elegante barra de navegación usando CSS

• Forzar la barra de desplazamiento vertical con CSS

• Barras gráficas con CSS