loading...

CSS Art Resources

_tdenise profile image Denise Tran 🐤 🐣 🐥 Updated on ・3 min read

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!

What is CSS Art?

  • 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.

Why learn how to create art using CSS?

  • 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.

How can I learn CSS/where can I learn it?

  • 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

What is Sass?

  • 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.

How can you start practicing now?

  • 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?

  • Try CSS battle

Where can you find examples?

  • Codepen.io is a great way to find other CSS Art by talented programmers.

Can I see somebody live code some CSS art?

Can I see somebody’s progress with CSS art?

Oh that’s really cool:

Resources For Learning How to Make CSS Art:

Other Resources:

Color Inspo:

Last edited: 6/29/19

Posted on by:

_tdenise profile

Denise Tran 🐤 🐣 🐥

@_tdenise

Tech and design fangirl, grandma, student. Forever learning, forever hustling. Incoming @Accenture 👩‍💻

Discussion

markdown guide