Maybe you have heard about the term ‘CSS Art’ somewhere and even may have come across amazing work by developers under the topic. Anyways, here I will be trying my hand at breaking down the art of creating CSS images for you like so many others have done already, which of course happened to be what I learned from once.

I like to put CSS art as ‘coding vector illustrations.’ No, seriously, spare a second to follow this link and you’ll realize that it’s not so wrong after all. Basically, it’s specifying CSS rules to some <div> tags, and the rest is your imagination. So, creating CSS art is not just a fun thing to do, but also an effortless way to speed up your CSS writing skills, and on the way, you might even discover a number of CSS tricks that you may not have even knew to exist before.

But before starting out, I will recommend my tool of choice for virtually any web design project, which is Brackets text editor. Obviously, here you will have to refresh the browser WAY often than when you code a typical web page, but the ‘live preview’ option available in Brackets will save you a lot of clicks (stress) on this task. Right now there is a number of other editors with the live preview facility, but as I said, Brackets is just my go-to.

So without further delay, let’s get into work. And what we will be creating today is this coffee cup:

To get started, we will first try to understand the different parts of the coffee cup illustration, that is, the <div> tags that we will be styling later with CSS.

<div class="box"> <!--Container. Helps to have a border-->
    <div class="lid"> <!--the lid. We have divided it into two parts-->
        <div class="lid-top"></div>
        <div class="lid-bottom"></div>
    </div>
  
    <div class="cup"> <!--mainly two parts. The shadow under the lid, and the sticker-->
         <div class="shadow"></div>
         <div class="sticker"> <!--on the sticker, we have a message, and a small heart, and the heart is made out of two halves!-->
             <div class="heart">
                  <div class="left half"></div>
                  <div class="right half"></div>
             </div>
                     
             <div class="quote">
                 <p>Potion of Life</p>
             </div>
         </div>
    </div>       
             
    <div class="base"></div> <!--just to put everything together-->
 </div> 

From this point onward will be the fun part.

First up, center the .box on the page with margin: 0 auto and set it up with your preferred width and height. I have used flexbox for .box and will be using it whenever possible for the rest of the<div>s, because flexbox is an easy way to get things aligned the way you want without the need to specify margins and padding and whatnot.

body{
     background-color: #00CAE8;
}
  
.box{
     margin: 0 auto;
     width: 75%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center
} 

The above code will not give you much, since we had not specified widths and heights for the child <divs>s of .box. Let’s start with .cup.

.cup{
     border-top: 370px solid #AB733A; /*height*/
     border-left: 45px solid transparent;
     border-right: 45px solid transparent; /*slant*/
     height: 0px;
     width: 200px; /*width*/
 } 

As you can see, this is not a rectangular shape, but a trapezoid. Here you set the height to 0 and play around with border-top (represents height of the trapezoid, in this case), border-left and border-right (how slanted the non-parallel edges are)  and width (width of the shorter edge of the two parallel edges.) Remember to set the background-color of border-left and border-right to transparent.

Now style the .lid to be a flexbox.

 .lid{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 75px;
 }

And then add styles for the child <div>s of .lid.lid-top and .lid-bottom. We have used the same approach of creating a trapezoid as we did for .cup, but note that this time, height of the shape is represented by border-bottom instead of border-top, because they are upside-down.

 .lid-top{
     border-bottom: 45px solid #5A4627; /*height*/
     border-left: 6px solid transparent;
     border-right: 6px solid transparent; /*slant*/
     height: 0;
     width: 280px; /*width*/
 }
  
 .lid-bottom{
     border-bottom: 30px solid #5A4627; /*height*/
     border-left: 5px solid transparent;
     border-right: 5px solid transparent; /*slant*/
     height: 0;
     width: 315px; /*width*/
 } 

Add the base.

.base{
     height: 5px;
     width: 400px;
     background-color: #000;
     border-radius: 5px;
 } 

Now we will move on to the child <div>s of .cup.

First, add style rules for .shadow. Un-comment the first three lines one by one and you’ll understand how position: relative works when you want to position an element relative to its parent element. Notice how height of .cup is 0, thus the .shadow started out at the bottom of .cup and after we set position: relative before setting top: -370px (which is the height of border-top of .cup), .shadow ended up right at the top of .cup.

.shadow{
     //position: relative;
     //top: -370px;
     //left: -45px;;
     border-top: 8px solid #85592E; /*height*/
     border-left: 1px solid transparent;
     border-right: 1px solid transparent; /*slant*/
     height: 0;
     width: 288px; /*width*/
 } 

Style the .sticker. This one is a trapezoid as well, and here there’s no way you can guess where to position it without trying out different values until you land it where you want!

.sticker{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
     top: -280px;
     left: -35px;
     border-top: 180px solid #fff; /*height*/
     border-left: 22px solid transparent;
     border-right: 22px solid transparent; /*slant*/
     height: 0;
     width: 225px; /*width*/
 } 

Position the .quote in the same manner. It helps to add the font styles including font-family and font-size first before positioning.

p{
     font-family: "Ink Free";
     font-size: 3em;
     font-weight: 600;
     text-align: center;
 }
  
 .quote{
     position: relative;
     top: -150px;
     width: 130px;
     height: 150px;
 } 

We will also be adding a small heart on the sticker near the end of the message.

.heart{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     position: absolute;
     width: 40px;
     height: 40px;
     top: -75px;
     left: 150px;
     transform: rotate(30deg)
 }
  
 .half{
     background-color: #5C058B;
     width: 20px;
     height: 40px;
     border-radius: 100%;
 }
  
 .left{
     transform: rotate(-35deg) translateX(3px);
 }
  
 .right{
     transform: rotate(35deg) translateX(-3px);
 } 

That’s about it! You now have a cute coffee cup with only a few lines of code, and this is not all one can do with CSS art either. Don’t forget to check out my CodePen below for the complete code.

So, I hope I taught you something useful and new, and shared with you a way to improve your coding skills and at the same time, use it to make something pretty.

Inspiration: