Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 2  /*************************************************/3  /* CSS PARA TODAS LAS BARRAS DE PROGRESO */4  /*************************************************/5 6  .barra_progreso {7  /* Formato estructural */8  border:solid red 0px;9  /* Estilo por defecto */10  width:500px;11  text-align:center;12  }13 14  .barra_arriba {15  /* Formato estructural */16  position:absolute;17  height:inherit;18  width:inherit;19  /* Estilo por defecto */20  background-color:navy;21  color:white;22  clip:rect(0px, 300px, auto, 0px);23  }24 25  .barra_abajo {26  /* Formato estructural */27  height:inherit;28  /* Estilo por defecto */29  background-color:lightblue;30  color:navy;31  }32 33 34  /*************************************************/35  /* CSS PARA LOS ESTILOS DE LA BARRA 1 */36  /*************************************************/37 38  #barra1 {39  width:400px; /* Es obligatorio que sea en px */40  height:auto;41  margin:auto;42  }43 44  #barra1 .barra_arriba{45  /* Sólo modificar la segunda coordenada (_, X, _, _) */46  clip:rect(0px, 220px, auto, 0px);47  background-color:green;48  color:white;49  }50 51  #barra1 .barra_abajo {52  color:black;53  background-color:#EEEE33;54  }55 56 57  /*************************************************/58  /* CSS PARA LOS ESTILOS DE LA BARRA 2 */59  /*************************************************/60 61  #barra2 {62  width:300px; /* Es obligatorio que sea en px */63  height:auto;64  margin:auto;65  border:solid black 1px;66  border-top-color:silver;67  border-left-color:silver;68  }69 70  #barra2 .barra_arriba{71  /* Sólo modificar la segunda coordenada (_, X, _, _) */72  clip:rect(0px, 150px, auto, 0px);73  background-color:#FF6666;74  color:white;75  }76 77  #barra2 .barra_abajo {78  color:black;79  background-color:white;80  }81 


Este ShareCode tiene versiones:
  1. Barras de progreso Mi bar... (24/04/2013)
  2. Barras de progreso Mi bar... (24/04/2013)
  3. Barras de progreso Mi bar... (24/04/2013)
  4. Barras de progreso Mi bar... (24/04/2013)
Enlace
El enlace para compartir es:

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados