I completed Codevember a while ago and created some CSS images during the month of November. Since then, I wanted to share my process on how I create art with CSS.

I was not familiar with Codevember until I saw what people were creating on CodePen. I was instantly inspired and wanted to join! Though creating something each day seemed like a challenge, I decided to go for it and ended up having fun.

Centering the image

First, I use the code below when starting my Codevember projects.

  html, body {
  min-height: 100vh;
  display: grid;
}

body {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

However, I actually do not have a definitive template as there are many methods to centering things. This pen by themarkappleby shows many ways of centering with CSS.

  .container {
  margin: auto;
  width: 20rem;
  height: 20rem;
}

Next, I set the width and height of the container. Think of it as a box and fit each shape within the dimensions of the container.

I recommend setting both properties to a maximum of 20rem (or 320px) if needed. I find it a good idea to be sure that the CSS image can be viewed on most devices, including mobile. The smallest mobile device width is 320px and I find that using 20rem or below for the width and height has the image fit inside the container without clipping.

Working with shapes

When it comes to actually creating the CSS image, the biggest tip I can give is to think building and putting the image together with shapes. I usually doodle the image in a sketch book to get an idea of what kinds of shapes I am going to code.

Outlined in red are the shapes. Essentially, this CSS image was made with some <div> tags of shapes with different properties such as width, height, border-radius, transform, etc. Just add style to your CSS art with what you want and see what you can come up with!

There are different ways of making shapes in CSS. It does not have to be complicated. I try to work as simple as I can. With some trial and error, I get the shapes down to how I like and finally I add colors to them. Sometimes I add gradients and animations to my CSS images too.

Then there are some complex shapes like the one. There are curves to the sides of the sword. I tend to choose a flat color for my background (in this case would be #1c2a4a) to create dividers with that same color to make the curved shape.

  .shape.left::after {
  top: -1rem;
  left: -1.5rem;
  width: 2rem;
  height: 9.75rem;
  background: #1c2a4a;
  border-radius: 100%;
}

.shape.right::after {
  top: -1rem;
  left: 2.5rem;
  width: 2rem;
  height: 9.75rem;
  background: #1c2a4a;
  border-radius: 100%;
}

Conclusion

Overall I found it all to be a great learning experience. Having daily coding challenges like Codevember has caused me not to spend too much time on each image and to just have fun with creative coding. Below are some great resources to learn more about CSS images!

Please feel free to share this post. I hope I was able to inspire someone out there to have fun and code. You can view more what I did for Codevember here. You can reach me at my website, Twitter, Github, Dribbble, and of course CodePen!


4,345 0 50