are things like this possible in css3?

jamesmorris86 · 24 Jul 2014 at 17:23

Hey guys, I've been reading up on css3 and it seems like you can do quite a lot of things. I''ve been working on a browser based game for a few years now just for a little fun, and have been using images to create the health bar for example.

I was wondering, is it possible in css3 to create something that would resemble this health bar? or is that just too tricky for css?

If its possible i will look into it more.

cheers for any advice

Dj_Jestar · 24 Jul 2014 at 17:55

Yes. Though it wouldn't be solely CSS. Each health chunk would need to have a class applied to it for "healthy" and "unhealthy" which you would then apply the appropriate style to.

However you cannot programmatically change that class in anything other than JavaScript AFAIK.

visibleman · 24 Jul 2014 at 19:09

Each of the gauges (from what i remember) in MGS are just progress bars, so you can use the same within HTML either by using the HTML5 progress or meter tags or you can create something using containers and manipulate the width of the 'bar' - some useful links Progress Bar tag, CSS3 Stylised container or Meter tag.

As Jestar says though, you're going to have to use JS/jQuery for updating the progressing bar.

jamesmorris86 · 24 Jul 2014 at 23:12

I have a fairly good system in place to update the length and fills of the bars depending on health, its the css I'm struggling with, been playing with it all night with not much luck.

If anyone would like to recreate that image in css/html I will gladly pay them via paypal for their troubles.

sist_si · 24 Jul 2014 at 23:41

how's that:
http://jsfiddle.net/scgough/2QD3N/1/

(not spent long on it - but hopefully it'll send you on the right track)

jamesmorris86 · 25 Jul 2014 at 10:23

Thats perfect!

thanks. Will email you in trust now

jamesmorris86 · 25 Jul 2014 at 12:33

If anyone would like to have a little go at this similar box in CSS, i would gladly pay them for their time also. Cheers

There would be no need for the blue image or the number 2, would only need the box and the writing at the bottom.

cypto · 27 Jul 2014 at 23:22

How's that? that's the closest I could get with the textured effect on the background with just css..

Overlaid it with a metal gear image so you can see the transparency.

http://codepen.io/anon/pen/xzvLi