Medidor De Salud En Html5

-------------------------------------------------
Como hacer medidor d salud html5 para juegos en css3
-------------------------------------------------
Introducción
Muchos juegos se diseñan con elementos comunes como indicadores del juego (para salud, magia, munición, dinero, etc.), o paneles de control y de estado que se colocan por los bordes. Forman parte del juego, pero nonecesariamente de la escena de gráficos principal.
En HTML5, el área principal de gráficos se suele crear con una etiqueta canvas (lienzo). A continuación, el desarrollador escribe con JavaScript para dibujar en el área del lienzo y crear el juego. Tiene sentido quitar los elementos del juego que no forman parte de la escena de gráficos principal del elemento de lienzo por un par de razones.
En primerlugar, los objetos se pueden animar a menudo en el DOM mediante animaciones y transiciones CSS para disfrutar de una mayor optimización del navegador y de una aceleración uniforme del hardware. Es decir, las animaciones que se puedan realizar en CSS funcionarán mejor que las realizadas en JavaScript.
En segundo lugar, el DOM y CSS no pueden manipular los objetos que se dibujan en unaetiqueta de lienzo con JavaScript. De este modo, moviendo elementos del juego al documento HTML principal y colocándolos en el elemento de lienzo, se puede conseguir la misma apariencia pero habrá que usar la potencia de CSS3, así como de JavaScript, para manipularlos.
En este artículo vamos a crear un medidor. Como ejemplo concreto, crearemos un medidor de salud.-------------------------------------------------
Medidor básico
En primer lugar el marcado básico HTML:



#meter-container {
width: 300px;
}
.meter {
height: 10px;
position: relative;background: #333;

border: 1px solid black;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

padding: 10px;

-webkit-box-shadow: inset 0 -1px 1pxrgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.strong-health {
background-color: #7eff00;
width: 85%;
}.weak-health {
background-color: #ff0;
width: 35%;
}

.danger-health {
background-color: #f00;
width: 10%;
}.meter-value {
/* Position the value */
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;...