CSS Beer Glass

[BDenson]

I am trying to make a Beer Glass that fills up depending on a PHP variable.

Quite similar to this http://www.suenovotny.com/blog/2011/...ss-and-php.php except it will be vertical and not horizontal and the glass is not a regular shape like the oval on that demo.

I'm a php programmer not a designer so I'm not sure if its even possible.

can anyone give me any hints or point me towards a suitable tutorial?

Thanks

Baz

[chrishirst]

use an image in the shape of a glass with the area of the glass set to transparent, and overlay it on two elements, one set to the % height of the empty colour, the other set to be the colour and % height of the fill.

[BDenson]

Originally Posted by chrishirst

use an image in the shape of a glass with the area of the glass set to transparent, and overlay it on two elements, one set to the % height of the empty colour, the other set to be the colour and % height of the fill.

Thanks Chris.

I have tried the following:

#beerglass {
  height:350px; 
  width:30px; 
  border:1px solid #CCC;
  }
  
#beer {
  background-color:#FFCC00; 
  width:100%;
  }


<div id=beerglass>
  <div id=beer style=height:65%>
  </div>
</div>

No glass image yet obv but it fills from the top down, and I need to fill from the bottom up.

[chrishirst]

And you do that reducing the height of the "empty" block at each step so it "uncovers" more of the "full" block.

Simple maths and logic, something that is half full is also half empty.

If you understand how positioning works you can do the same kind of thing using relative positioning, and overlay various elements.