Categories
CSS HTML Web development

CSS Coffee To Go

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

CSS Coffee Cup

Demo:

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

What do you need to do?

  1. Add HTML
  2. 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:

CSS Coffee Cup

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 visit: lenastanley.com.

Watch also video tutorial:

Enjoy coding!