Professional Documents
Culture Documents
ndice
1. 2. 3. 4. 5. 6.
Introduccin Medidor bsico Adicin de degradados CSS al medidor Adicin de animaciones CSS al medidor Adicin de fuentes web al medidor Ms recursos
Funcin Esquinas redondeadas CSS3 Sombras CSS3 Degradados CSS Animaciones CSS Compatible? s s s s
Introduccin
Muchos juegos se disean con elementos comunes como indicadores del juego (para salud, magia, municin, dinero, etc.), o paneles de control y de estado que se colocan por los bordes. Forman parte del juego, pero no necesariamente de la escena de grficos principal. En HTML5, el rea principal de grficos se suele crear con una etiqueta canvas (lienzo). A continuacin, 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 grficos principal del elemento de lienzo por un par de razones. En primer lugar, los objetos se pueden animar a menudo en el DOM mediante animaciones y transiciones CSS para disfrutar de una mayor optimizacin del navegador y de una aceleracin uniforme del hardware. Es decir, las animaciones que se puedan realizar en CSS funcionarn mejor que las realizadas en JavaScript. En segundo lugar, el DOM y CSS no pueden manipular los objetos que se dibujan en una etiqueta de lienzo con JavaScript. De este modo, moviendo elementos del juego al documento
HTML principal y colocndolos 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 artculo vamos a crear un medidor. Como ejemplo concreto, crearemos un medidor de salud.
Medidor bsico
En primer lugar el marcado bsico HTML:
<html> <body> <style> #meter-container { width: 300px; } .meter { height: 10px; position: relative; background: #333; border: 1px solid black; -moz-border-radius: 30px;
-webkit-box-shadow: inset 0 -1px 1px rgba(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;
Se puede usar esto para crear tres estilos de medidor de salud. Medidor de salud en peligro Medidor de salud dbil Medidor de salud fuerte Estos medidores no estn mal y la nica parte de CSS3 que se ha usado es la de esquinas redondeadas, que permite redondear las esquinas del medidor de vida.
#gradient-example .danger-health { background-color: #f00; width: 15%; background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); background-image: -webkit-linear-gradient(#f0a3a3, #f42323); }
Medidor de salud en peligro Medidor de salud dbil Medidor de salud fuerte Los degradados CSS son parecidos a los degradados de otras herramientas grficas como Photoshop o GIMP. Se define un tipo de transicin, ya sea lineal o radial, y, a continuacin, se define un color para el punto inicial y otro para el punto final. El degradado pasar suavemente de uno a otro. Tambin se puede definir cualquier cantidad de puntos finales que permiten pasar a un color intermedio antes de pasar al siguiente color de parada o al color final. Estos degradados CSS son sutiles, pero dejan que el color del medidor de vida destaque sobre el fondo. En este momento, tambin debera comprobar que est leyendo este artculo en un navegador habilitado para CSS3, ya sea IE9+, Firefox, Opera, Safari o Chrome. De lo contrario, no podr ver el degradado.
@-webkit-keyframes glow { 0% { -webkit-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5); border-color: rgba(0,0,255,0.5); } 100% { -webkit-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0); border-color: rgba(0,0,255,1.0); } } @-moz-keyframes glow { 0% { -moz-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5); border-color: rgba(0,0,255,0.5); } 100% {
-moz-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0); border-color: rgba(0,0,255,1.0); } } @-ms-keyframes glow { 0% { -ms-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5); border-color: rgba(0,0,255,0.5); } 100% { -ms-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0); border-color: rgba(0,0,255,1.0); } } #animation-example .danger-health { background-color: #f00; width: 15%; background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); background-image: -webkit-gradient(linear,left top,left bottom,colorstop(0, #f0a3a3),color-stop(1, #f42323)); background-image: -webkit-linear-gradient(#f0a3a3, #f42323); -webkit-animation-name: glow; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: glow; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-timing-function: ease-in-out; -ms-animation-name: glow; -ms-animation-duration: 1s; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; -ms-animation-timing-function: ease-in-out;
El medidor de salud en peligro: Ahora el medidor de salud en peligro brilla para llamar la atencin del jugador sobre el estado crtico de su salud Las animaciones CSS permiten que el navegador pase de un conjunto de estilos CSS a otro conjunto de estilos CSS. Tambin se pueden definir estilos intermedios para la animacin. En este caso, slo defino dos estilos. El primero est al 0 % o al principio de la animacin. El
primero est al 100 % o al final de la animacin. Para crear el efecto brillante, el navegador pasar suavemente la propiedad de sombras de un tamao pequeo a uno grande.
font-size: 40px; color: #fff; font-family: 'Chewy', cursive, helvetica, arial, sans-serif; text-shadow: 2px 3px 1px #000; letter-spacing: 0px; -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; text-align: center; text-transform:uppercase;
15 %
Medidor de salud en peligro
35 %
Medidor de salud dbil
85 %
Medidor de salud fuerte
Promedio: