Log in

I forgot my password

Account Switcher
Switch Accounts


Latest topics
» Unhealthily Determined Janitorial Staff (OPEN)
Sun May 14, 2017 8:05 am by Griffin

» Day one (open)
Mon May 01, 2017 2:24 am by Meara

» The first punch [Sable]
Thu Apr 27, 2017 3:42 pm by Meara

» Stinger
Sun Apr 09, 2017 3:51 pm by Sidonia Barta

» Pacem
Sun Apr 09, 2017 3:31 pm by Sidonia Barta

» Maculata
Sun Apr 09, 2017 3:11 pm by Sidonia Barta

» Shirou Velox
Sun Apr 09, 2017 12:34 am by Faye

» Sidonia Barta
Sat Apr 08, 2017 9:06 pm by Faye

» Sedvi
Fri Apr 07, 2017 11:14 pm by Faye




Skill-Trees and Summons

Abilities

Lore

Lore

Skill-Trees and Summons

Community

Community Intern
Affiliates

Final Fantasy Topsites

How to make an HP bar [code and tutorial]

View previous topic View next topic Go down

How to make an HP bar [code and tutorial]

Post by Fade on Thu Apr 28, 2016 3:35 pm



This is actually pretty basic HTML that anyone can learn, I learned it after watching a YouTube tutorial on how to make something completely different. Needless to say the guy indirectly taught me how to do something that I thought was freakin' awesome! It's so easy in fact, that I decided I'd share it with you guys, since I plan on using it now. Smile
Code:
Health:
<html>
<body>
<progress id="healthbar" value="100" max="100" style="width:300px;"></progress>
</body>
</html>



Health:






In the code above my value is at 100-- meaning my healthbar is maxed. I haven't taken damage yet in the RP, woot! Now, after getting slapped around by my enemy to the point I'm half beaten I can easily make this bar change. I just have to make my value 50 and poof, the code will change the bar to this. It's fucking cyber magic dudes.

Health:







If you want to change the length of your bar as a whole, just change the width, it's easy as pie. By changing my width from 300px, to 100px I end up with the bar below.

Health:






Health:






No credit needed guys, take it as you want it. Just remember who it was that taught you if anyone ever asks. Enjoy!



Hi there! I figured I'd place this here for anyone interested since I noticed this could also fit MH's DP and MP guages for anyone who might want to use it, hope you guys like it aye.~

_________________

Fade
The Adventurer

Directory :
Posts : 143

View user profile

Back to top Go down

Re: How to make an HP bar [code and tutorial]

Post by Fade on Thu Apr 28, 2016 3:51 pm

Also, if you make your value like higher-- as in say, 300, it fixates how damaging an ability can really be. So if I were like, T3 getting hit by a T1 fireball and I have a T3 END I probably got hit with -10, but my actual health pool is 300, so it didn't hurt me much. Which is a pretty good guage imo, Idk, anyways, yeah. I'm unsure how exactly it'd work here, though the HP concept is really interesting me. Hopefully you find this just as cool as I do. Personally I thought it was awesome. Lol.

Fade
The Adventurer

Directory :
Posts : 143

View user profile

Back to top Go down

Re: How to make an HP bar [code and tutorial]

Post by Professor Velox on Thu Apr 28, 2016 4:34 pm

Neat.

_________________
V | 700MP | 150MP | 15GP
| Directory |
MAG V | STE V | AGI V | END V | SPE V | SYN 0
avatar
Professor Velox

Directory : Shirou Velox
Timeline : The Ultimate Saga
Posts : 236

View user profile

Back to top Go down

Re: How to make an HP bar [code and tutorial]

Post by Faye on Thu Apr 28, 2016 8:34 pm

That's Nifty.

_________________
Character Tier(V)
MP(700) | GP(5)
STR Tier 5 | END Tier 5 | MAG Tier 5 | SPE Tier 5 | AGI Tier 5 | SYNTH Tier 5
avatar
Faye

Posts : 607

View user profile

Back to top Go down

Re: How to make an HP bar [code and tutorial]

Post by Lenneth on Thu Apr 28, 2016 11:03 pm

cool, is there a code for different colors for different resource pools?

_________________
Tier: 5th [Legacy] | MP: 875 | DP: 13
(T5)STR|(T5)END|(T5)MAG|(T5)SPE|(T5)AGI|(T5)SYTH
avatar
Lenneth
The La Vaeas Of Darkness
The La Vaeas Of Darkness

Directory : Charming
Posts : 610

View user profile

Back to top Go down

Re: How to make an HP bar [code and tutorial]

Post by Fade on Thu Apr 28, 2016 11:43 pm

I tried looking into that, but I couldn't find out how. Maybe it's not a style, but some other thing that needs to be put in there. I looked though, and no luck unfortunately.

_________________

Fade
The Adventurer

Directory :
Posts : 143

View user profile

Back to top Go down

Re: How to make an HP bar [code and tutorial]

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum