Barras de Progreso con CSS

unreal4u · 19-nov-2009, 01:11

Barras de Progreso con CSS

Hace tiempo que tenía el script, pero se me había olvidado publicarlo.

Encontré en Internet una forma bastante sencilla de crear barras de progreso sólo con CSS: es un truco bastante viejo pero encontré genial la idea que había detrás. Es demasiado simple pero a la vez ingenioso.

El truco en sí es bastante fácil:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Porcentajes en CSS</title>
<style type="text/css">
body{font-family:Arial;font-size:12px}

div.box{width:250px;border:1px solid #000;height:17px;margin:2px 0;background:#CCC}
div.bar{height:14px;line-height:11px;color:#FFF;text-align:right;padding:3px 0 0 0}
.bg-one{background:#000}
.bg-ima{background:url(progreso.png)}
</style>
</head>
<body>


<h2>Porcentajes en CSS (Sin imagen)</h2>
<div class="box"><div class="bar bg-one" style="width:40%">40%</div></div>
<div class="box"><div class="bar bg-one" style="width:25%">25%</div></div>
<div class="box"><div class="bar bg-one" style="width:93%">93%</div></div>
<h2>Porcentajes en CSS (Con imagen)</h2>
<div class="box"><div class="bar bg-ima" style="width:86%">86%</div></div>
<div class="box"><div class="bar bg-ima" style="width:3%">3%</div></div>
<div class="box"><div class="bar bg-ima" style="width:50%">50%</div></div>


</body>
</html>

Lo cual produce esta salida:

Básicamente lo que se hace es declarar un contenedor de un ancho específico. Dentro de este declaramos otro con un ancho en porcentaje, que puede ser establecido fácilmente a través de PHP u otro método. Por último, le doy dos clases (aprovechando herencia y selectores de CSS2.1): la primera establece parámetros básicos y comunes a ambos, la segunda clase es simplemente el color de fondo. Esto se puede obviar si siempre se ocupa el mismo.

De esta manera es posible crear una bonita barra de progreso solamente con CSS.

Fue el tip webmasterístico de hoy

Saludos !!

Editado por unreal4u en 19-nov-2009 a las 01:15.

unreal4u · 25-nov-2009, 09:12

Re: Barras de Progreso con CSS

ni un comentario siquiera ?

Alejandroneomatrix · 25-nov-2009, 10:25

Re: Barras de Progreso con CSS

, esta muy bonito gracias.

Y es verdad se entiende, sencillo.

19-nov-2009, 01:11	#1
unreal4u Zend Certified Engineer ex-admin :) Registrado: octubre-2005 Ubicación: Eindhoven, The Netherlands Posts: 12.229	Barras de Progreso con CSS Hace tiempo que tenía el script, pero se me había olvidado publicarlo. Encontré en Internet una forma bastante sencilla de crear barras de progreso sólo con CSS: es un truco bastante viejo pero encontré genial la idea que había detrás. Es demasiado simple pero a la vez ingenioso. El truco en sí es bastante fácil: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Porcentajes en CSS</title> <style type="text/css"> body{font-family:Arial;font-size:12px} div.box{width:250px;border:1px solid #000;height:17px;margin:2px 0;background:#CCC} div.bar{height:14px;line-height:11px;color:#FFF;text-align:right;padding:3px 0 0 0} .bg-one{background:#000} .bg-ima{background:url(progreso.png)} </style> </head> <body> <h2>Porcentajes en CSS (Sin imagen)</h2> <div class="box"><div class="bar bg-one" style="width:40%">40%</div></div> <div class="box"><div class="bar bg-one" style="width:25%">25%</div></div> <div class="box"><div class="bar bg-one" style="width:93%">93%</div></div> <h2>Porcentajes en CSS (Con imagen)</h2> <div class="box"><div class="bar bg-ima" style="width:86%">86%</div></div> <div class="box"><div class="bar bg-ima" style="width:3%">3%</div></div> <div class="box"><div class="bar bg-ima" style="width:50%">50%</div></div> </body> </html> Lo cual produce esta salida: Básicamente lo que se hace es declarar un contenedor de un ancho específico. Dentro de este declaramos otro con un ancho en porcentaje, que puede ser establecido fácilmente a través de PHP u otro método. Por último, le doy dos clases (aprovechando herencia y selectores de CSS2.1): la primera establece parámetros básicos y comunes a ambos, la segunda clase es simplemente el color de fondo. Esto se puede obviar si siempre se ocupa el mismo. De esta manera es posible crear una bonita barra de progreso solamente con CSS. Fue el tip webmasterístico de hoy Saludos !! Editado por unreal4u en 19-nov-2009 a las 01:15.

Barras de Progreso con CSS

Categorías:

Foros CHW:

25-nov-2009, 09:12	#2
unreal4u Zend Certified Engineer ex-admin :) Registrado: octubre-2005 Ubicación: Eindhoven, The Netherlands Posts: 12.229	Re: Barras de Progreso con CSS ni un comentario siquiera ?

25-nov-2009, 10:25	#3
Alejandroneomatrix Usuario Registrado: mayo-2006 Posts: 308	Re: Barras de Progreso con CSS , esta muy bonito gracias. Y es verdad se entiende, sencillo.


Tags: Ninguna