Making CSS art can be intimidating, but it's easy once you break graphics down into simple parts. If you peruse websites like CodePen, DevArt and Dribbble, it’s very easy to feel overwhelmed by the incredible things that developers and designers make, especially when you’re just starting out. I made my first piece of CSS art after lurking on these sites for years and eventually mustered up the courage to try and do it. Now, a few years and over 100 experiments later, it’s one of my favourite hobbies.
Making CSS art is interesting and fun. It teaches you nuances of CSS that you might not normally work with, helps you see graphics (and problems in general) modularly and improves your speed when writing CSS. It’s also a great way for designers and developers to get on the same page when working on a user interface together. As you practise and refine your skills making CSS art, you’ll see an improvement in your day-to-day work (and you might even enjoy it more, too).
In this article, we’re going to be making a cute ice cream bar graphic in CSS. I’ll talk through and give you the code to follow, so that you can customise it and make it your own. Let’s get started!
Creating a site from scratch? You need a website builder and our guide to web hosting providers. Got files to keep safe? Keep them in cloud storage.
01. Set up your document
Before we write any CSS, we have to actually have something to style. You can use a preprocessor like HAML or Pug, or just straight HTML. I’ll stick with pure HTML and CSS in our examples, but you’re free to use what you’re most comfortable with. Pull up a blank Pen on CodePen or an HTML document, and include the following for the ice cream bar in the <body>.
<div class=’container’>
<div class=’ice-cream’>
<div class=’glare’></div>
<div class=’face’>
<div class=’eyes’>
<div class=’eye left’>
</div>
<div class=’eye right’>
</div>
</div>
<div class=’mouth’></div>
</div>
</div>
<div class=’stick’></div>
</div>
02. Settle on colours and sizes
Normally when you have a graphic in front of you to make, you will need the dimensions and colours of that graphic. In this particular case, I’ll be providing you with those dimensions and colours.
When you don’t have me around though, I recommend getting yourself a colour picker tool (I personally use Digital Color Meter on Mac and ColorPic on Windows), and a screenshot tool to figure out your dimensions (the native ones for your operating systems work just fine).
Let’s add those dimensions and colours now to our document.
body {
background: #FED550;
}
.ice-cream {
width: 240px;
height: 350px;
background: #F982BF;
}
.glare {
width: 35px;
height: 70px;
background: #FF98CC;
}
.eye {
width: 18px;
height: 18px;
background: #FF2995;
}
.mouth {
width: 75px;
height: 25px;
background: #FF2995;
}
.stick {
width: 60px;
height: 72px;
background: #ECAA7D;
border-top: 12px solid #DB9E74;
}
Right now, our image is all blocky and in the corner. Before we shape everything better, let’s add some positioning and transforms. Personally, my favourite positioning techniques (generally) are absolute positioning containers, and using flexbox for everything else. If you prefer using absolute and relative positioning for everything, or even CSS Grid, go for it!
Now, we have to position the container in the middle of the page (I’ll be using absolute positioning and a translate transform), and make sure the contents of the main container are centred and rotated as needed.
You might notice that I also added a couple of dimensions for the '.face' and '.eyes' classes – that’s for handling the spacing within that container. Go ahead and add these changes in yourself to each class:
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,
-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.ice-cream {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.glare {
position: relative;
left: 170px;
bottom: 20px;
transform: rotate(-38deg);
}
.face {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 58px;
}
.eyes {
display: flex;
justify-content: space-between;
width: 145px;
}
04. Choose your pseudo-elements
Our little ice cream bar is looking pretty good, if I do say so myself! One last concept that is incredibly helpful for making CSS art is pseudo-elements.
Every single element on a page can actually be three elements: the main element, ::before, and ::after. You can style ::before and ::after as if they’re separate <div>s within any element.
For example, I could have changed the .eyes container to have no .eye <div>s at all, and just style a ::before and ::after for each eye. That would have been cool, but that would make styling the glare on each eye impossible.
That being said, for the final missing glare on those eyes, let’s add a ::before pseudo-element to make that possible. The key things to add to a pseudo-element are a display value and content: ‘’.
Check it out, and with that, we’re done!
.eye {
position: relative;
}
.eye::before {
display: block;
content: ‘’;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
background: #fff;
border-radius: 100%;
}
You're an artist!
If you’d like to check out my final result, you can find it on my CodePen profile (above). Making CSS art is really just a matter of applying the concepts we talked about in interesting and fun ways. You can take these techniques and run with them, and even add your own animations with keyframes and transitions. All this being said, I hope you learned something new, and this motivated you to try your hand at making something beautiful.
This article was originally published in creative web design magazine Web Designer. Buy issue 282 or subscribe.
Related articles:
