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:
- Barras de progreso Mi bar... (24/04/2013)
- Barras de progreso Mi bar... (24/04/2013)
- Barras de progreso Mi bar... (24/04/2013)
- Barras de progreso Mi bar... (24/04/2013)
Enlace
El enlace para compartir es: