DEV Community

Cover image for Dev Coffee
Gambhir Sharma
Gambhir Sharma

Posted on

Dev Coffee

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Is it even relevant to ask whether or not you enjoy coffee or tea as a developer? This question offends me, in my opinion. I'm drinking my morning coffee even as I write this. My day begins with tea or coffee. Coffee lifts my spirits at both happy and sad moments. Although I am aware that my body cannot handle too much caffeine, I make an effort to limit my intake. I used to drink my coffee in enormous glasses, but I've switched to tiny cups lately. I drink three little cups of coffee a day. Saying that let's begin with this blog. Happy coffee happy coding. 😉

Demo

Journey

Step: 01

Make the Cup and Plate

Make the cup and Plate

<div class="container">
  <div class="plate"></div>
  <div class="cup">
    <div class="top">
      <div class="circle">
        <div class="tea"></div>
      </div>
    </div>
    <div class="handle"></div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #607d8b;
}
.container {
  position: relative;
  top: 50px;
}
.cup {
  position: relative;
  width: 280px;
  height: 300px;
  background: linear-gradient(to right, #f9f9f9, #d9d9d9);
  border-bottom-left-radius: 45%;
  border-bottom-right-radius: 45%;
}
.top {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #f9f9f9, #d9d9d9);
  border-radius: 50%;
}
.circle {
  position: absolute;
  top: 5px;
  left: 10px;
  width: calc(100% - 20px);
  height: 50px;
  background: linear-gradient(to left, #f9f9f9, #d9d9d9);
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
}
.tea {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#c57e65, #e28462);
  border-radius: 50%;
}
.handle {
  position: absolute;
  top: 40px;
  right: -70px;
  width: 160px;
  height: 180px;
  border: 25px solid #dcdcdc;
  border-left: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-radius: 50%;
  transform: rotate(42deg);
}
.plate {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, #f9f9f9, #e7e7e7);
  border-radius: 50%;
  box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2); 
}
Enter fullscreen mode Exit fullscreen mode

Step 02

Shadows and Details

Deailing the cup and plate

...
  <div class="cup">
    <i class="devto">
      <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" />
    </i>
    <div class="top">
...
Enter fullscreen mode Exit fullscreen mode
.plate::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  background: linear-gradient(to left, #f9f9f9, #e7e7e7);
} 
.plate::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
  border-radius: 50%;
  background: radial-gradient(
    rgba(0, 0, 0, 0.2),
    25%,
    transparent,
    transparent
  );
}
.devto {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Step: 03

Adding vapour animation

Final CodePen

    <div class="top">
      <div class="vapour">
        <span style="--i:1;"></span>
        <span style="--i:3;"></span>
        <span style="--i:16;"></span>
        <span style="--i:5;"></span>
        <span style="--i:13;"></span>
        <span style="--i:20;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:10;"></span>
        <span style="--i:8;"></span>
        <span style="--i:17;"></span>
        <span style="--i:11;"></span>
        <span style="--i:12;"></span>
        <span style="--i:14;"></span>
        <span style="--i:2;"></span>
        <span style="--i:9;"></span>
        <span style="--i:15;"></span>
        <span style="--i:4;"></span>
        <span style="--i:19;"></span>

      </div>
      <div class="circle">
        <div class="tea"></div>
      </div>
    </div>
    <div class="handle"></div>
Enter fullscreen mode Exit fullscreen mode
.vapour {
  position: relative;
  display: flex;
  z-index: 1;
  padding: 0 20px;
}
.vapour span {
  position: relative;
  bottom: 50px;
  display: block;
  margin: 0 2px 50px;
  min-width: 8px;
  height: 120px;
  background: #fff;
  border-radius: 50%;
  animation: animate 5s linear infinite;
  filter: blur(8px);
  animation-delay: calc(var(--i) * -0.5s);
}
@keyframes animate {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateY(-150px) scaleX(5);
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateY(-300px) scaleX(10);
  }
}
Enter fullscreen mode Exit fullscreen mode

Ending

Thanks for reading my article. Also don't forget to like and share the CodePen. Bye until next time..👋

Top comments (15)

Collapse
 
steeve profile image
Steeve

Your cup of coffee is well made! I tried using ChatGPT to generate it with only HTML and CSS, but that's disappointing:

Cup of coffee made with ChatGPT

Collapse
 
gambhirsharma profile image
Gambhir Sharma

AI sucks at CSS ART 😅

CSS takes time and some patience. You are almost done with the cup just align the circle properly and it's done.

Collapse
 
johongirr profile image
Jaxongir

Prompt > Implement > Refine Prompt > Implement > start again

Collapse
 
steeve profile image
Steeve

The screenshot of the coffee cup is the 10th refined prompt, and I had no improvements from ChatGPT

Collapse
 
ngdangtu profile image
Đăng Tú

The strip down version of Gooey effect is truly creative! Love it!

Collapse
 
raphaelproject001 profile image
Rafael Barbosa da Silva

Excellent,show!👏👏👏👍

Collapse
 
iamkhushi profile image
Khushi

Amazing...Learning something new and innovative

Collapse
 
jlxfd profile image
Julia Alexis Diaz

Bookmarking because that vapour animation is just amazing!!!

Collapse
 
gracy profile image
Gracy

This is so cool!

Collapse
 
spetrethegray profile image
jonathan • Edited

This is cool!
I drink as much coffee as I can get my hands on maybe I should start using smaller cups so I can design like you!😂

Collapse
 
gambhirsharma profile image
Gambhir Sharma

The small cups trick works very well 😅

Collapse
 
supermari0s profile image
Μάριος

Excellent creation !

Collapse
 
gambhirsharma profile image
Gambhir Sharma

Commenting to make the stats look good 😅

Collapse
 
cryptohumanz profile image
Miloje

Awesome post.
I love your post.

Collapse
 
yiqihaha profile image
yiqihaha

cool!