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.

What do you need to do?

1. Add HTML
2. Add CSS

Step 1.

Add HTML

<div class="coffeetogo">
   <div class="left"></div>
   <div class="right"></div>
   <div class="middle-section"> 
      <div class="logo"></div>
   </div> 
</div>

Step 2.

Add CSS

Set up the color of the background.

body {
  background: #B0C4DE;
}

Now, we’ll style a coffee cup.

.coffeetogo{
  top: 60px;
  left: 60px;
  width: 220px;
  height: 290px;
  position: relative;
  background: #800000;
  box-shadow: inset 0px 0px 15px 0px
}

.coffeetogo:before{
   content: '';
   position: absolute;
   top: -35px;
   left: 50%;
   transform: translateX(-50%);
   background: white;
   width: 250px;
   height: 35px;    
   border-radius: 20px;
   box-shadow: inset 0px 0px 15px 0px
   
}

.coffeetogo:after{
   content: '';
   position: absolute;
   background: white;
   top: -50px;
   left: 20%;
   transform: translateX(-50%);
   width: 50px;
   height: 15px; 
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   box-shadow: inset 0px 0px 15px 0px
}

Our coffee cup should look like that now:

Let’s give the cup the shape:

.left{
    position: absolute;  
    left: 0;
    border-style: solid;
    border-width: 300px 0 0 40px;
    border-color: transparent transparent transparent #B0C4DE;
    z-index: 999;
}

.right{
    position: absolute;
    right: 0; 
    border-style: solid;
    border-width: 0 0 300px 40px;
    border-color: transparent transparent #B0C4DE transparent;
    z-index: 999;
 
}

The cup is more looking like a cup now ;).

Add the logo.

.middle-section{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background: #8D7147; 
    width: 100%;
    height: 170px;
    box-shadow: inset 0px 0px 5px 0px
}

.logo {
      top:35px;
      left: 57px;
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #3A2306;
      border-color: #241508;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
      box-shadow: inset 0px 0px 15px 0px
    }
    .logo:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #3A2306;
      border: 18px solid #3A2306;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
      
    }
   .logo:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: #241508;
      border: 18px solid #241508;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
      
    }

The Coffee to go is ready!

To see the live output visit: lenastanley.com.

Watch also video tutorial:

Enjoy coding!