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.

*code opened in the Safari browser.
To see the live output click here.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *