CSS Coffee To Go - Lena Design

Monday without Coffee? I can’t imagine it! Today I created in CSS Cup of Coffee to Go. To learn how to create CSS Coffee To Go follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Coffee Cup/ Coffee To Go on the website click here.

What do you need to do?

Add HTML
Add CSS

Step 1.

Add HTML

<div class="coffeeCup">
  <div class="cup"></div>
  <div class="steam"></div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

Now, we’ll style a coffee cup:

.coffeeCup {
  position: relative;
  width: 50px;
  height:0;
  border-top: 130px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

.coffeeCup:before {
  content:"";
  position: absolute;
  border:3px solid #333;
  top:-145px;
  width:95px;
  height: 10px;
  left:-25.5px;
}

.coffeeCup:after {
  content:"";
  position: absolute;
  width:90px;
  height: 10px;
  border-radius:30px 30px 0 0;
  top:-157px;
  left:-19px;
  background-color: #333;
  
}

.cup {
  position: absolute; 
  width: 57px;
  height:0;
  border-top: 55px solid #fff;
  border-left: 8.5px solid transparent;
  border-right: 8.5px solid transparent;
  top:-100px;
  left:-12px;
}

Our coffee cup should look like that now:

Add some steam:

.steam {
  position: absolute;
  width: 20px;
  height:20px;
  border-top: 3px solid #333;
  border-left: 3px solid #333;
  border-top-left-radius: 100%;
  top:-185px;
  left:-10px;
}

.steam:before {
  content:"";
  position: absolute;
  width: 30px;
  height:3px;
  background-color: #333;
  left:20px;
  top:-3px;
}

.steam:after {
  content:"";
  position: absolute;
  width: 20px;
  height:20px;
  border-bottom: 3px solid #333;
  border-right: 3px solid #333;
  border-bottom-right-radius: 100%;
  top:-23px;
  left:48px;
}

The Coffee to go is ready!

To see the live output on the website visit: lenastanley.com.

Watch also video tutorial:

Enjoy coding!

Share this: