Code newbie CSS art

HIYA!

Learn how to make a simple coffee cup using only HTML and CSS!

I'm a coding newb currently enrolled at 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 or codesandbox.

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 and Kevin Powell on YT. 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), and animation (more information on this here: W3Schools).

*{
    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

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.

Comments

[🧸 🏳️‍🌈 cooper-codes 💻 🎮]

Hi Monet,

Fantastic article, congrats on the great work!

If I can make a suggestion, as someone who has gone down this path (very) recently.

I see you are using PX and while this is fine it will cause scalability issues, check this out from the CSS lord Jhey Tompkins, it shows you how to set up and build CSS Art that scales via percentages (and they are only a few 10 min clips).

Great work and I cant wait to see more art in the future.

egghead.io/lessons/css-create-a-re...

[Monet C]

Thanks so much for the feedback! I was actually looking into how to make my CSS art more scalable so thank you so much for the resource. Definitely will check it out.