DEV Community

Cover image for Get your beverage with CSS illustration and animation
Aneeqa Khan
Aneeqa Khan

Posted on

Get your beverage with CSS illustration and animation

Hi folks! After I made an illustration with CSS, I wanted to try more with some animation and function.
So here I made a cup with pure CSS and added few buttons to fill the cup with the desired beverage, also added simple animation to fill the cup.

Cup with HTML and CSS

So, first of all, I started with an illustration of the cup I made one parent div containing two children's divs which would represent the cup holder and cup body.

 <div class="cupContainer">
   <div class="cupHolder"></div>
   <div class="cupBody"></div>
 </div>
Enter fullscreen mode Exit fullscreen mode

and styled it like this

.cupContainer {
  height: 200px;
  width: 200px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.cupHolder {
  height: 20px;
  width: 40px;
  transform: rotate(-90deg);
  border-radius: 25px 25px 0 0;
  border: 10px solid #999999;
  position: absolute;
  margin-right: 100px;
}
.cupBody {
  height: 100px;
  width: 80px;
  background-color: #999999;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

After that, I added another div to represent the beverage inside the cup, so now the code would look like this

<div class="cupContainer">
  <div class="cupHolder"></div>
  <div class="cupBody"></div>
  <div id="beverage" class="coffee"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.coffee {
  width: 70px;
  background-color: #8A624A;
  height: 70px;
  position: absolute;
  bottom: 55px;
  border-radius: 3px;
}
Enter fullscreen mode Exit fullscreen mode

Now we get a cup with coffee in the browser
coffee cup css

Get beverage on button click

Next, I wanted to change the beverage type in a cup with a button click just like a coffee machine but not with a javascript state or variable. I wanted to change it with the CSS variable.
I started with creating a beverage named CSS variable in the root.

:root {
   --beverage: #999999;
}
Enter fullscreen mode Exit fullscreen mode

After that, I made three buttons beside a cup like this

<div class="btnsContainer">
  <button
    class="btnDiv"
    type="button"
    id="coffee"
    onclick="get_beverage(this.id)"
  >
    Coffee
  </button>
  <button
    class="btnDiv"
    type="button"
    id="tea"
    onclick="get_beverage(this.id)"
  >
    Tea
  </button>
  <button
    class="btnDiv"
    type="button"
    id="chocolate"
    onclick="get_beverage(this.id)"
  >
    Hot Chocolate
  </button>
</div>
Enter fullscreen mode Exit fullscreen mode

and styled these like this

.btnsContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.btnDiv {
  height: 30px;
  width: 100px;
  background-color: #999999;
  color: white;
  border-width: 0;
  margin-bottom: 10px;
  border-radius: 10px;
}
Enter fullscreen mode Exit fullscreen mode

As you can see I added get_beverage function to each onclick of three buttons and passed ids of each button as a parameter.
Now get_beverage the function will get our CSS variable through document.querySelector method and then I simply added an if-else command to check the value of passed id and changed the beverage variable with desired hex code.

function get_beverage(value) {
  var r = document.querySelector(":root");
  if (value === "coffee") {
    r.style.setProperty("--beverage", "#8A624A");
  } else if (value === "tea") {
    r.style.setProperty("--beverage", "#c1734b");
  } else {
    r.style.setProperty("--beverage", "#683b39");
  }
}
Enter fullscreen mode Exit fullscreen mode

Also before that don't forget to change the class .coffee background-color to beverage variable

.coffee {
  ...
  background-color: var(--beverage);
  ...
}
Enter fullscreen mode Exit fullscreen mode

Now you would see that cup is filling with the desired beverage but it's changing color absurdly. For that, I added simple linear animation to it.

Adding animation

I made another class for animation and named it as coffeeAnimation and defined my animation properties like this

.coffeeAnimation {
  -webkit-animation: fill-it-up 3s linear forwards;
  animation: fill-it-up 3s linear forwards;
}
Enter fullscreen mode Exit fullscreen mode

defined keyframes

@-webkit-keyframes fill-it-up {
  0% {
    height: 5%;
  }
  100% {
    height: 40%;
  }
}

@keyframes fill-it-up {
  0% {
    height: 5%;
  }
  100% {
    height: 40%;
  }
}
Enter fullscreen mode Exit fullscreen mode

and passed this class to my beverage div alongside with coffee class.

<div id="beverage" class="coffee coffeeAnimation"></div>
Enter fullscreen mode Exit fullscreen mode

After adding this, you would see that the animation is running for only the first time but I wanted to restart the animation after every click.
For that, I just removed the coffeeAnimation from the div and added it again. I wrote these lines in my get_beverage function.

  ...
  var el = document.getElementById("beverage");
  el.style.animation = "none";
  el.offsetHeight;
  el.style.animation = null;
  ...
Enter fullscreen mode Exit fullscreen mode

and here I got some nice animation of filling a cup. ☕
You can see the full code and results below.

Top comments (8)

Collapse
 
mohamedfasil profile image
Mohamed Fasil

instead of height you should use the transform: scaleY property that'd be more performant

Collapse
 
aneeqakhan profile image
Aneeqa Khan • Edited

oh I didnt know about this. Thank you for your suggestion 😊

Collapse
 
dongphuchaitrieu profile image
Đồng Phục Hải Triều

Nice tutorial ☕

Collapse
 
aneeqakhan profile image
Aneeqa Khan

Thank you!

Collapse
 
mrshoaib profile image
MR. SHOAIB

Thank you for this awesome post

Collapse
 
aneeqakhan profile image
Aneeqa Khan

Thank you!

Collapse
 
sfarid811 profile image
Saad FARID

It's very helpful, a lot of thanks :)

Collapse
 
aneeqakhan profile image
Aneeqa Khan

I am glad it helped :)