HTML5 is amazing and list of things which can be done using it is endless. Anyways, I am sharing how we can fill an empty glass with water using HTML5, I am sharing the code snippets for it. Let me know your thoughts on it. A modern web browser(Like Firefox, Chrome, Opera, Safari) will be needed for it. The live demonstration of this can be seen at the end of this post.

The HTML

The HTML is really simple, it has three divs, first for container of the glass, second for the glass and the third for the water in it. The first div(container) is not really necessary.
{code type=HTML}

{/code}

The CSS

This is where it gets a little tricky, the #container has the general styling properties for the container, the #glass again has general CSS properties of the glass. Now in #water, a background image has been used for waves for the water, you can also specify a color instead of the background image if you don’t need the waves. Then comes the transition CSS properties, transition tags are used here for the easing effect after the hover action(when the water has to fall down). Then finally #glass:hover #water comes which defines the CSS properties when the user hovers over the element, transition properties are the CSS tags responsible for these easing effects.
{code type=CSS}
#container {
background: rgba( 0, 0, 0, 0.10);
margin-left:auto;
margin-right:auto;
width: 300px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 30px;
padding-top: 5px;
}
#glass {
background: rgba( 255, 255, 255, 0.50);
border: 1px solid #bbb;
border-top: 1px solid #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 300px;
height: 400px;
position: relative;
}
#water {
background-image: url(“waves.png”);
background-position: top right;
position: absolute;
bottom: 0px;
width: 300px;
height: 100px;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#glass:hover #water {
height: 350px;
background-position: top left;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
}
{/code}

Demonstration

Here is a demonstration below for filling a glass with water, alternatively you can click here.

Or if you don’t like the waves(Or click here).

Further Reading

Below are the pages of CSS properties used in above snippets.

• transition – MDC Docs
• Surfin' Safari – Blog Archive » CSS Animation
• Opera: CSS3 Transitions support in Opera Presto 2.3