I've been really interested in the intersection between art and coding. My initial interest in CSS art started because I wanted to practice these two skills. Since my initial exposure to amazing CSS art creations on Twitter, Codepen, and many other sites I've been twitching with excitement to jump in and start learning how to make art using pure CSS myself! I made this little list to document things that I have learned and possibly help anybody that comes along this list curious about CSS art.
Hopefully, you enjoy this little list! Have fun learning!
Pure CSS art is exactly that, art made using pure CSS.
CSS art is made by creating divs and adjusting the shapes, colors, angles, among a few other things to create an image.
You mentioned divs. What are they and what do they do? A div is an HTML element used to group elements as well apply styles but does not by default do anything.
It’s a great way to practice CSS.
It’ll help you speed up when writing CSS.
Teaches you positioning, sizing, styling, design skills, and creativity (a great marketable skill)!
Learn how to break down larger problems into simpler ones.
- It can be a little difficult to dive straight into CSS art if you don’t know CSS prior. Learning CSS prior to creating CSS art is recommended. Thankfully it’s quite simple!
- MDN Web Docs
- Sass is a style sheet language. It is an extension of CSS which allows you to keep things more organized and the ability to use variables, nested rules, inline imports, and much more.
There are weekly challenges on Codepen that you can try out.
Find an image you like and try to recreate it in CSS. Break down the image into simple geometrical shapes and look for specific colors you want to use for each part of the image. By thinking about these things ahead of time it can make going into coding the image much easier!
Look at other’s code. Tweak it and see how everything changes. When you change the values what does it do?
- Codepen.io is a great way to find other CSS Art by talented programmers.
Having trouble making specific shapes? Use this tool in order to generate css code for certain shapes that can be difficult to make by hand.
Last edited: 6/29/19