Date Archives December 2017

Breaking Down CSS Art

As the year wraps up I thought I would go back and explain some of the things I have learned this year.

One of the things I get asked about the most is how I make art with CSS.

So I am going to the share my process for creating images with CSS and hopefully inspire you to create your own.

One of the first things I do after finding the image I want to recreate is attempt to draw the image myself. This is a personal preference. I have found it helps me to break down the image into smaller basic shapes if I draw the image first.

Note: these drawings don’t have to be fancy. You can keep them pretty basic. You just need to get the idea of the shapes you will be making.

Roy Lichtenstein's 1962 painting Spray

Once I have the basic shapes picked out I use coolors.co to pick out the colors from the original image. I use Sass to create color variables from the colors I generate so I can easily reference them while developing the image. Using Sass isn’t necessary but helps make the tedious task of creating these images a little easier.

coolors.co color generator

Pug

My CSS images are made from a lot of <div> tags. To save my own sanity when creating these images I have chosen to use Pug so I don’t have to write out all of the individual opening and closing <div> tags. If you want to learn more about Pug you can check out the getting started with Pug here.

Again using Pug isn’t necessary. I didn’t use Pug for a lot of my images. But once I learned how to, it was a big time saver.

Template

Most of the images I create start with the same basic template.

See the Pen cf53a89d299032acd7c65f4e93dc50fd by Christina Gorton (@cgorton) on CodePen.28314

I set up a frame with a plain background to start. The only thing I change depending on the image is the width and height of the frame. From here I start to build the image one div at a time. In the image below you can see this process. If you were to open the dev tools and hover over each part of the image you can see the simple shapes that make up the whole image. This particular image is made up of mostly rectangular divs with varying border-radius. While the complete picture can look overwhelming at first, breaking it down in to these smaller shapes makes it manageable.

Tip: A great way to find out how to make some of these shapes is to browse CodePen and look at the code from other developers who have made CSS images. All those amazing images you see really can be broken down easily. Looking at other people’s code is probably one of the fastest ways I leveled up my CSS images. All those crazy shapes I saw were a lot easier to understand when I opened up the dev tools and hovered over different parts of the image.

breaking down a CSS image

Piecing it all together

There isn’t a right or wrong way to create CSS images (it’s art after all). I have looked through the code of a lot of other CSS images and everyone has a different way of putting it all together.

For me, when I find images other people create to be intimidating, I start with something simple. I break it down into basic shapes and start piecing them together in CSS like a puzzle. This process has also worked well for other coding related problems I encounter. With a little time and practice any one can make CSS art. Try it out for yourself and feel free to reach out to me on twitter if you have any questions, need some encouragement, or want to show off the cool stuff you make!