4 hours ago, Malkavian Grin said:
I actually went ahead and cut my own 200x20px images to use in our Barbarians of Lemuria game for Adhra. I think they look nicer that way and plus they are guaranteed to look that way. I used to have a plugin to make my own gifs with photoshop but I can't seem to figure out how to activate it anymore. Haven't used it in 15+ years.
What gif creators would you suggest? I found one that was absolutely abysmal in options. It was like "do you want your images to blink back and forth? Ta-da!" and I ran away.
I did notice that weird tiling effect. It's because you didn't use background-position:center; which as you can see below is pretty spot on. I think stuff defaults to top. This gif for some reason splits at the top and bottom. Also, you can now see that it doesn't loop right on the edges. Pity.
I used to have a program that did it as well back when i was working in tech but since then i've just resorted to online tools. (how long before AI can do it easily?) but none of them do a really steller job. Animate gifs are fun but i think most people would probably hate them in every post 😄
4 hours ago, bwatford said:
You should also be able to declare different colors for different progression. I.e. if bar Is full, green, orange at 75%, yellow at 50%, red at 25% etc.
Of course you could probably also just do a gradient red to green.
My kingdom for a little CSS...
My brain is a little melty today but you COULD use a gradient image and percentage. There is probably a more elegant solution..
I'm not super happy with the mid-colours because i made it in photoshop which i'm not exactly an expert at. Ideally it would go red till 25, then orange till 50, then yellow until 75 then green until 100. I can do that with something like " background: linear-gradiant(to right, red, orange, yellow, green) " which does work but then i couldn't think if a simple way to apply a percentage to the bar that didn't just scale the colours with it instead of making the gradient static.