Dev Coffee
Tags: frontendchallenge, devchallenge, css
Published: 2024-03-30 03:32:10

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

## Inspiration 
<!-- What snack are you highlighting today? -->
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
<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->

{% codepen https://codepen.io/gambhirsharma/pen/OJGjGZd %}

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
### Step: 01
#### Make the Cup and Plate


![Make the cup and Plate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91z47n446mgp44gku75a.png)


```html
<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>
```

```css
* {
  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); 
}
```
---

### Step 02
#### Shadows and Details


![Deailing the cup and plate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lxbq53u1qn1njvckgx7.png)



```html
...
  <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">
...
```


```css
.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;
}
```

---


### Step: 03
#### Adding vapour animation

   
![Final CodePen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g3q9fv7iylj9dop9z30.png)


```html
    <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>
```

```css
.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);
  }
}
```

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

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->