Code newbie CSS art
Tags: html, css, beginners, 100daysofcode
Published: 2020-10-03 23:23:24

#HIYA!

### Learn how to make a simple coffee cup using only HTML and CSS!
![image of pure CSS coffee cup](https://dev-to-uploads.s3.amazonaws.com/i/83h9zzdzserfs8euwnxs.jpeg)

I'm a coding newb currently enrolled at [Bloc.io](https://www.bloc.io/) in their Full-Stack developer track. I've grown to love CSS art and even though I know there are tons of blog posts about CSS art I wanted to share my thoughts on how to get started. 

####1) You do not have to be a CSS master to make CSS images:

I believe this wholeheartedly, I myself am no CSS ninja (yet ;-) )but I've been able to make some pretty cool images so far. I recommend using your preferred text editor or a website like [codepen](https://codepen.io/) or [codesandbox](https://codesandbox.io/index2). 

####2) Learn positioning:
 
It would help to have a general understanding of positioning, especially relative and absolute. To get a general understanding check out [CSS Tricks](https://css-tricks.com/almanac/properties/p/position/) and [Kevin Powell on YT](https://www.youtube.com/watch?v=P6UgYq3J3Qs). There are tons of other CSS properties that you should know and can learn with experience, but if you know the basics and positioning then you are all set :-)!    

####3) Let's write up the HTML:
Here we used 5 very simple divs to create this cup of joe.
A container to house the cup and steam. A div for the cup, the cup div has a child div called handle. After the cup div, there is a sibling div called steam-container here is where the child div steam is placed and makes the steam coming from the cup. 
 ```
<div class="container">
   <div class="cup">
     <div class="handle"></div>
   </div>
   <div class="steam-container">
     <div class="steam"></div>
   </div>
</div>
```

####4) Now the fun stuff, the CSS:

Note that a few CSS properties used in my code are position relative and absolute, ::before and ::after ( more information on this here: [Kevin Powell on YT](https://www.youtube.com/watch?v=zGiirUiWslI)), and animation (more information on this here: [W3Schools](https://www.w3schools.com/css/css3_animations.asp)). 

```
*{
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color:lavender;
}

.container{
    margin: 0 auto;
    position: relative;
    width: 700px;
    height: 700px;
    top: 30px;
}

.cup{
    background-color: white;
    position: relative;
    width: 200px;
    height: 250px;
    border-radius: 10px;
    top: 240px;
    left: 220px;
}

.handle{
    background-color: white;
    position: absolute;
    width: 170px;
    height: 150px;
    right: -100px;
    top: 50px;
    border-radius: 50%;
}

.handle:after{
    content: "";
    position: absolute;
    background-color: lavender;
    width: 60px;
    height: 60px;
    top: 45px;
    right: 40px;
    border-radius: 50%;
}

.steam-container{
    width: 200px;
    height: 100px;
    position: relative;
    bottom: 100px;
    left: 220px;
}

.steam{
    position: absolute;
    background-color:grey;
    opacity: 0;
    filter: blur(5px);
    height: 80px;
    width: 30px;
    left: 30px;
    animation: steam 3s linear infinite;
}

.steam::before{
    content: '';
    position: absolute;
    background-color:grey;
    height: 80px;
    width: 30px;
    left: 50px;
}

.steam::after{
    content: '';
    position: absolute;
    background-color:grey;
    height: 80px;
    width: 30px;
    left: 100px;
}
```

####5) The Animation code if you're interested:

Please note in the CSS code above in the .steam{...} section there is an animation called "steam" which goes on for 3 seconds, we declare linear so that the animation has the same speed from start to end, and then we call infinite so that the animation plays forever. With this, we will then make a keyframe called steam and then set the animation.

```
@keyframes steam{
    0%
    {
        opacity: 0.1;
    }
    75%
    {
        opacity: 0.3;
    }
    100%
    {
        opacity: 0.1;
    }
}
``` 
**To see the animation in action check out my [Codepen](https://codepen.io/wanderingdev/pen/abNemVr)**
 
Thanks for reading and checking out my little tutorial. Please provide any feedback you may have. :-) I love CSS art so more blog posts to come.