No al cierre de webs
TreeWeb::Artículos::HTML y CSS::Barra de progreso
Permalink: http://www.treeweb.es/u/506/ 10/11/2010

Barra de progreso

Descripción

Para conseguir el efecto característico de las barras de progreso de forma limpia se necesitarían capas con efectos de filtrado (como el de transparencia) que manipulan los píxeles de color que están debajo de ella. Podemos conseguir el efecto mediante CSS 2 con un pequeño truco que consiste en crear dos capas exactamente iguales pero con los colores diferentes de tal forma que una esté encima de la otra. Para crear el efecto, sólo tenemos que recortar la capa superior para dejar ver parte de lo que hay abajo. Este efecto se ha conseguido utilizando la propiedad 'clip' que permite recortar divs. También se puede utilizar la combinación overflow:hidden y width pero el CSS queda algo más engorroso. Para finalizar sería conveniente crear un javascript que se encargue de gestionar automáticamente la etiqueta, el porcentaje, los colores y los tamaños.

Ejemplo

Puedes descargar el archivo original desde /TreeWeb/Articulos/HTML-y-CSS/Barra-de-progreso/barra_de_progreso.html.

Código

    0 
    1 <!--
    2     Maquetación para barras de progreso en HTML + CSS
    3     Autor: gerardooscarjt@gmail.com
    4     Fecha: 02/09/2010
    5 -->
    6 
    7 <style type="text/css">
    8 
    9     /*************************************************/
   10     /*      CSS PARA TODAS LAS BARRAS DE PROGRESO    */
   11     /*************************************************/
   12 
   13     .barra_progreso {
   14         /* Formato estructural */
   15         border:solid red 0px;
   16         /* Estilo por defecto */
   17         width:500px;
   18         text-align:center;
   19     }
   20 
   21     .barra_arriba {
   22         /* Formato estructural */
   23         position:absolute;
   24         height:inherit;
   25         width:inherit;
   26         /* Estilo por defecto */
   27         background-color:navy;
   28         color:white;
   29         clip:rect(0px, 300px, auto, 0px);
   30     }
   31 
   32     .barra_abajo {
   33         /* Formato estructural */
   34         height:inherit;
   35         /* Estilo por defecto */
   36         background-color:lightblue;
   37         color:navy;
   38     }
   39 
   40 
   41     /*************************************************/
   42     /*      CSS PARA LOS ESTILOS DE LA BARRA 1       */
   43     /*************************************************/
   44 
   45     #barra1 {
   46         width:400px; /* Es obligatorio que sea en px */
   47         height:auto;
   48         margin:auto;
   49     }
   50 
   51     #barra1 .barra_arriba{
   52         /* Sólo modificar la segunda coordenada (_, X, _, _) */
   53         clip:rect(0px, 220px, auto, 0px);
   54         background-color:green;
   55         color:white;
   56     }
   57 
   58     #barra1 .barra_abajo {
   59         color:black;
   60         background-color:#EEEE33;
   61     }
   62 
   63 
   64     /*************************************************/
   65     /*      CSS PARA LOS ESTILOS DE LA BARRA 2       */
   66     /*************************************************/
   67 
   68     #barra2 {
   69         width:300px; /* Es obligatorio que sea en px */
   70         height:auto;
   71         margin:auto;
   72         border:solid black 1px;
   73         border-top-color:silver;
   74         border-left-color:silver;
   75     }
   76 
   77     #barra2 .barra_arriba{
   78         /* Sólo modificar la segunda coordenada (_, X, _, _) */
   79         clip:rect(0px, 150px, auto, 0px);
   80         background-color:#FF6666;
   81         color:white;
   82     }
   83 
   84     #barra2 .barra_abajo {
   85         color:black;
   86         background-color:white;
   87     }
   88 
   89 </style>
   90 
   91 <div id="barra1" class="barra_progreso">
   92     <div class="barra_arriba">
   93         Mi barra de prueba (55%)
   94     </div>
   95     <div class="barra_abajo">
   96         Mi barra de prueba (55%)
   97     </div>
   98 </div>
   99 
  100 <br><br>
  101 
  102 <div id="barra2" class="barra_progreso">
  103     <div class="barra_arriba">
  104         Barra 2
  105     </div>
  106     <div class="barra_abajo">
  107         Barra 2
  108     </div>
  109 </div>
  110 
  111 <br><br>
  112 
  113 <div id="barra3" class="barra_progreso" style="margin:auto;">
  114     <div class="barra_arriba">
  115         Barra sin estilos
  116     </div>
  117     <div class="barra_abajo">
  118         Barra sin estilos
  119     </div>
  120 </div>

  121 
Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados