are things like this possible in css3?

jamesmorris86

jamesmorris86

jamesmorris86

Associate
Joined
11 Oct 2008
Posts
268
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?

bar.jpg


If its possible i will look into it more.

cheers for any advice
 
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.
 
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.
 
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.
 
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.

box.jpg
 
You must log in or register to reply here.
Back
Top Bottom