Welcome to today’s tutorial. Today we create a coffee machine art with CSS that pours coffee when hovered over. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials. You can check them out here. For this tutorial, all we need is some basic HTML and CSS.
Video Tutorial:
I have the video version of this tutorial on my youtube channel. If you would like to watch it and code along with me, do check it. Also, be sure to subscribe to my youtube channel for more such tutorials.
Project Structure:
Animated Coffee Machine. It consists of two files. The first one is the HTML file index.html. While the second is the stylesheet style.css.HTML:
Once the project folder is ready, we can start with the HTML section. Copy the code that is provided below and paste it into the HTML file you have created.
The HTML code consists of a div with a class name container. We use this container to wrap up all the other elements. Apart from wrapping the elements, it centres the whole art. The container consists of four div elements with class names upper, filter, back and lower respectively. Each of these consists of other div elements that are shaped with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Coffee Machine</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="upper">
<div class="timer"></div>
<div class="upper-btn"></div>
</div>
<div class="filter">
<div class="filter-base"></div>
<div class="handle"></div>
<div class="coffee"></div>
<div class="steam"></div>
<div class="coffee-drop"></div>
</div>
<div class="back">
<div class="tray"></div>
<div class="cup"></div>
</div>
<div class="lower">
<div class="lower-btn"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we code the CSS. Now, copy the code below and paste it into your stylesheet. We start by removing the margins and paddings of the document body. A sandy colour with code ‘#efb54a’ is used for the body.
Other Tutorial You Might Like:
The container is a 350px x 350px box. It is centred using the position ‘absolute’ and translate. The upper div is used to create the top of the coffee machine along with the buttons and the timer.
They add a hover effect to the filter. When the filter has hovered, the animation is added to the div coffee. This animation moves it downwards while setting the visibility back to ‘visible’. Also, the animation is added to the filter handle. This makes the filter handle look like it’s spinning on hover.
We use a combination of shadows, pseudo-elements to create the rest of the elements. They are pretty self-explanatory. If you are a beginner at creating shapes with CSS, you should first check out this playlist.
body{
padding: 0;
margin: 0;
background-color: #efb54a;
}
.container{
height: 350px;
width: 350px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.upper{
height: 0;
width: 180px;
border-top: 70px solid #735123;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: relative;
margin: 55px auto;
box-sizing: border-box;
}
.upper:after{
content: "";
position: absolute;
background-color: #3b240e;
height: 5px;
width: 185px;
left: -12.5px;
top: -70px;
}
.timer{
content: "";
position: absolute;
height: 65px;
width: 60px;
background-color: #e06526;
margin: auto;
left: 0;
right: 0;
top: -65px;
display: grid;
place-items: center;
}
.timer:before{
content: "";
position: absolute;
height: 32px;
width: 32px;
background-color: #ffffff;
border-radius: 50%;
}
.timer:after{
content: "";
position: absolute;
background-color: #e06526;
height: 12px;
width: 4px;
border-radius: 4px;
top: 20px;
}
.upper-btn{
background-color: #ffffff;
height: 8px;
width: 8px;
position: absolute;
border-radius: 50%;
left: 18px;
bottom: 40px;
}
.upper-btn:before{
content: "";
position: absolute;
background-color: #e06526;
height: 12px;
width: 12px;
border-radius: 50%;
top: 20px;
left: -2px;
}
.upper-btn:after{
content: "";
position: absolute;
background-color: #ffffff;
height: 6px;
width: 6px;
border-radius: 50%;
top: 23px;
left: 1px;
}
.filter{
width: 45px;
height: 16px;
background: linear-gradient(
to right,
#ede9d7 70%,
#dad1b7 70%
);
position: relative;
margin: auto;
bottom: 57px;
z-index: 5;
cursor: pointer;
}
.filter-base{
background-color: #ffffff;
height: 13px;
border-radius: 0 0 5px 5px;
position: relative;
top: 15px;
width: 45px;
}
.filter-base:before{
content: "";
position: absolute;
background-color: #ffffff;
height: 6px;
width: 12px;
top: 12px;
left: 16px;
}
.handle{
height: 7px;
border-right: 70px solid #e06526;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
position: relative;
left: 39px;
bottom: 16px;
}
.filter:hover .handle{
animation: spin 6s;
}
@keyframes spin{
50%{
transform: translateX(-102px) rotateY(-180deg);
}
}
.handle:after{
content: "";
position: absolute;
height: 22.5px;
width: 22.5px;
border-radius: 50%;
background-color: #c9561d;
left: 58px;
top: -7.5px;
transform: rotateY(70deg);
}
.coffee{
height: 30px;
width: 8px;
background-color: #e06526;
border-radius: 0 0 15px 15px;
position: relative;
margin: auto;
bottom: 3px;
visibility: hidden;
}
.filter:hover .coffee{
animation: pour 6s 4s;
}
@keyframes pour{
0%{
visibility: visible;
}
100%{
transform: translateY(30px);
}
}
.steam{
background-color: rgba(204,204,204,0.2);
height: 10px;
width: 10px;
border-radius: 50%;
position: relative;
margin: auto;
top: 50px;
}
.filter:hover .steam{
animation: rise-steam 4s 5s;
}
@keyframes rise-steam{
100%{
transform: translateY(-75px);
}
}
.steam:before{
content: "";
position: absolute;
background-color: rgba(230,230,230,0.3);
height: 6px;
width: 6px;
bottom: 5px;
border-radius: 50%;
}
.coffee-drop{
background-color: #e06526;
height: 10px;
width: 10px;
border-radius: 50%;
position: relative;
bottom: 43px;
left: 18px;
visibility: hidden;
}
.filter:hover .coffee-drop{
animation: drop 3s 6.1s;
}
@keyframes drop{
100%{
visibility: visible;
transform: translateY(25px);
}
}
.back{
width: 145px;
background-color: #3b240e;
height: 140px;
position: relative;
margin: auto;
bottom: 72px;
}
.back:before{
content: "";
position: absolute;
height: 12px;
width: 155px;
background-color: #e06526;
bottom: 0;
left: -5px;
}
.tray{
width: 100%;
height: 15px;
position: absolute;
margin: auto;
bottom: 3px;
background-image: radial-gradient(
#3b240e 5px,
transparent 6px
);
background-size: 15px 15px;
background-position: -2.8px 0;
}
.cup{
height: 0;
width: 30px;
border-top: 70px solid #ede9d7;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: relative;
top: 58px;
margin: auto;
z-index: 5;
}
.cup:before{
content: "";
position: absolute;
height: 0;
width: 6px;
border-top: 70px solid #dad1b7;
border-left: 0 solid transparent;
border-right: 10px solid transparent;
bottom: 0;
left: 24px;
}
.cup:after{
content: "";
position: absolute;
height: 4px;
width: 55px;
background-color: #ffffff;
border-radius: 5px;
bottom: 68px;
left: -12.5px;
}
.lower{
height: 30px;
width: 160px;
background-color: #735123;
border-radius: 5px 5px 0 0;
position: relative;
margin: auto;
bottom: 75px;
}
.lower:before{
content: "";
position: absolute;
height: 8px;
width: 170px;
background-color: #3b240e;
bottom: -5px;
left: -5px;
}
.lower-btn{
height: 15px;
width: 9px;
background-color: #3b240e;
position: relative;
left: 13px;
top: 8px;
}
.lower-btn:before{
content: "";
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #e06526;
bottom: 3px;
left: 18px;
}
If you are stuck or need a little help you can download the source code by simply clicking the button below. Happy Coding!
