Categories
CSS HTML Web development

CSS Coffee Cup

 CSS Coffee Cup

To create the CSS Coffee Cup follow the steps below and watch the video tutorial:

Demo:

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

Step1.

Add HTML

<div class="coffeecup">
  <div class="cup"></div>
  <div class="shadow"></div>
  <div class="label"></div>
  <div class="cover"></div>
  <div class="top"></div>
  <div class="steam"></div>
  <div class="logo"></div>
  <div class="eyes"></div>
</div>

Step2.

Add CSS

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

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

.coffeecup {
  position: relative;
}

Style the cup:

.coffeecup:before {
  content:"";
  position: absolute;
  width: 200px;
  height: 10px;
  border-radius:10px;
  background-color: #d4a373;
  top:191px;
  left:-65px;
}

.cup {
  position: relative;
  height:0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 150px solid #fefae0;
  width: 120px;
}

.cup:before {
  content:"";
  position: absolute;
  background-color: #fefae0;
  width: 120px;
  height: 50px;
  border-radius: 0 0 15px 15px;
  top:-5px;
  left:0;
}

.cup:after {
  content:"";
  position: absolute;
  border-radius: 0 0 0 15px;
  background-color: rgba(0,0,0,0.09);
  width: 40px;
  height: 40px;
  top:5px;
}

.shadow {
  position: absolute;
  height:0;
  border-right: 0px solid transparent;
  border-left: 2px solid transparent;
  border-top: 40px solid rgba(0,0,0,0.09);
  width: 40px;
  top:10px;
  left:0;
}

.label {
  position: absolute;
  height:0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 130px solid #e9edc9;
  width: 125px;
  top:35px;
  left:-4px;
}

.label:before {
  content:"";
  position: absolute;
  height:0;
  border-right: 0px solid transparent;
  border-left: 7px solid transparent;
  border-top: 130px solid #ccd5ae;
  width: 45px;
  top:-130px;
  left:-7px;
}

.label:after {
  content:"";
  position: absolute;
  width: 120px;
  background-color: rgba(0,0,0,0.09);
  height: 5px;
  left:2px;
}

.cover {
  position: absolute;
  width: 150px;
  height: 25px;
  background-color: #fefae0;
  top:-15px;
  left:-10px;
  border-radius:5px;
}

.cover:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  width:130px;
  height:5px;
  top:25px;
  left:10px;
}

.cover:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  width: 47px;
  height: 25px;
  border-radius: 5px 0 0 5px;
}

.top {
  position: absolute;
  background-color: #fefae0;
  width: 130px;
  height: 20px;
  border-radius: 25px 25px 0 0;
  left:0;
  top:-35px;
}

.top:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  border-radius: 25px 0 0 0;
  width:34px;
  height: 20px;
}
CSS Coffee Cup

Add the steam:

.top:after {
  content:"";
  position: absolute;
  background-color: rgba(255, 255, 255,0.5);
  border-radius:20px;
  height: 20px;
  width: 40px;
  top:-40px;
  left:150px;
  box-shadow: -20px -80px rgba(255, 255, 255,0.5), -170px -40px rgba(255, 255, 255,0.5);
}

.steam {
  position: absolute;
  width: 70px;
  height: 20px;
  background-color: rgba(255, 255, 255,0.5);
  border-radius:20px;
  top:-55px;
  left:70px;
  box-shadow: 0 -20px rgba(255, 255, 255,0.5), 10px -40px rgba(255, 255, 255,0.5), 0 -60px rgba(255, 255, 255,0.5), -25px -80px rgba(255, 255, 255,0.5);
}

.steam:before {
  content:"";
  position: absolute;
  width: 70px;
  height: 20px;
  background-color: #faedcd;
  border-radius:20px;
  left:-50px;
  box-shadow: 85px 0 #faedcd, 100px -40px #faedcd, 18px -40px #faedcd, 0px -80px #faedcd, 82px -80px #faedcd;
}

.steam:after {
  content:"";
  position: absolute;
  border-radius: 20px;
  width: 110px;
  height: 20px;
  background-color: rgba(255, 255, 255,0.5);
  top:-100px;
  left:-60px;
}
CSS Coffee take away

Add the logo:

.logo {
  position: absolute;
  overflow: hidden;
  background-color: #333;
  width: 40px;
  height: 20px;
  border-radius: 0 0 50px 50px;
  top:100px;
  left:75px;
}

.logo:before {
  content:"";
  position: absolute;
  background-color: #a4161a;
  width:30px;
  height: 20px;
  border-radius:50%;
  top:7px;
  left:2px;
}

.eyes {
  position: absolute;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  width:18px;
  height: 18px;
  border-right: 5px solid #333;
  border-top: 5px solid #333;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  border-radius:100px;
  transform: rotate(-45deg);
  top:-70px;
}

.eyes:before {
  left:95px;
}

.eyes:after {
  left:65px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Coffee Express Animation

CSS Coffee To Go

CSS Steaming Coffee

Categories
Web development

CSS Steaming Coffee

CSS Steaming Coffee

Demo:

*to see the CSS Steaming Coffee Animation on the website click here.

To create the CSS Steaming Coffee Animation follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="steaming-coffee">
  <div class="cup"></div>
<div class="test">
<div class="steam">
  <div class="one"></div>
  <div class="two"></div>
  </div>
  <div class="steam-2">
  <div class="one"></div>
  <div class="two"></div>
  </div>
    <div class="steam-3">
  <div class="one"></div>
  <div class="two"></div>
  </div>
  </div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #0a9396;
}

.steaming-coffee {
  position: relative;
}

Style the coffee cup:

.cup {
  position: relative;
  width:200px;
  height: 150px;
  background-color: #e9d8a6;
  top:120px;
  left:-30px;
  border-radius: 0 0 20px 20px;
}

.cup:before {
  content:"";
  position: absolute;
  width:60px;
  height:60px;
  border: 20px solid #e9d8a6;
  border-radius:50%;
  left:-65px;
  top:25px;
}

.cup:after {
  content:"";
  position: absolute;
  background-color: #fff;
  height:15px;
  width:350px;
  border-radius:20px;
  top:160px;
  left:-80px;
}
CSS Coffee Cup

Add the steam:

.test {
  position: relative;
  width:200px;
  height: 100px;
  overflow: hidden;
  opacity:0.5;
  top:-150px;
}

.steam {
  position: absolute;
  top:100px;
  animation: steam 1s linear infinite;
}

.steam-2 {
  position: absolute;
  top:100px;
  left:50px;
  animation: steam 1s linear infinite;
}

.steam-3 {
  position: absolute;
  top:100px;
  left:100px;
  animation: steam 1s linear infinite;
}

.one {
  position: absolute;
}

.two {
  position: absolute;
}

.steam:before, .one:before, .two:before, .steam-2:before, .steam-3:before {
  content:"";
  position: absolute;
  border-left: 7px solid white;
  border-top: 7px solid white;
  width:30px;
  height: 30px;
  border-top-left-radius:100%;
  transform: rotate(-40deg);
}

.one:before {
  top:-93px;
  left:0;
}

.two:before {
  top:-185px;
  left:1.2px;
}

.steam:after, .one:after, .two:after, .steam-2:after, .steam-3:after {
  content:"";
  position: absolute;
  border-right: 7px solid white;
  border-top: 7px solid white;
  width:30px;
  height: 30px;
  border-top-right-radius:100%;
  transform: rotate(40deg);
}

.steam:after {
  top:-46.5px;
  left:4px;
}

.one:after {
  top: -139.5px;
  left:4px;
}

.two:after {
  top:-231px;
  left:4.7px;
}

.steam-2:after {
  top:-46.5px;
  left:4.5px;
}

.steam-3:after {
  top:-46.5px;
  left:4.5px;
}

Animate the steam:

@keyframes steam {
  0% {transform: translateY(100px);}
  100% {transform: translateY(7px);}
}

Enjoy coding!

Read also:

CSS Coffee Cup

CSS Coffee Express Animation

CSS Coffee To Go