Question

Hello is there any way to create something like diablo hp/mana orb?
https://i.stack.imgur.com/LAsDB.jpg
I mean transitions and overlaping circles.
I can use imagemagick, php, css3, html5, gd2, jquery

Answer 1

You can achieve this through the use of clever dropshadows and background-images:

#orb {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3), inset 0 0 20px rgba(0,0,0,1);
  cursor: pointer;
  border-radius: 100px;
  overflow: hidden;
  background: transparent url(http://www.contemporaryartsociety.org/media/uploads/2010/04/4286/20-poland-flag-jpg.jpg) 50% 50% no-repeat;
  color: #000;
  line-hieght: 100px;
  font-size: 72px;
  text-align: center;
}

and a tiny bit of javascript:

//event that adds or substracts health
$(this).animate({'background-position-y': Math.random()*100 + "%"}, 500)

See it in action here: http://jsfiddle.net/FhpVD/