Jump to content

Edit History

Neopopulas

Neopopulas

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.

 

65% Health

 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..

100%
75%
50%
25%

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.

 

Neopopulas

Neopopulas

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.

 

65% Health

 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..

100%
75%
50%
25%

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 orage 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.

 

Neopopulas

Neopopulas

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.

 

65% Health

 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..

100%
75%
50%
25%

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 orage 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.

 

×
×
  • Create New...