How creating CSS images made me a better developer
Throughout my life all I ever wanted to be was an artist of some kind. I wanted to be an author, a poet, a painter, a photographer, and later, a developer. To me, being a developer has always been about creativity, about the act of creating something that wasn’t there before. As a frontend developer I love to create something beautiful that gives people joy visually and offers great user experience.
And with becoming a programmer, I was given a tool I could misappropriate to make me an artist again: CSS.
Lately, more and more people have started getting into creating graphics out of the basic shapes CSS gives us. It all started on codepen. I got my first taste of CSS art through CSS Quests and more recently the #dailycssimages challenge. Both challenges offer cues on what you can create with just CSS, no images allowed. It’s an amazing way to get people into this great new art form.
Why oh why?
I stopped counting how many times people have asked me why I would waste my time coding a rocket with just CSS when it would be so much easier to just create an SVG in Illustrator and animate it using JavaScript.
The answer is quite simple: Because I can. It’s a challenge. It’s a game. It’s an art form. Why do people “waste time” on drawing lifelike portraits with pencils when you could just as easily take a photograph? Why do we waste time on learning instruments when we can make music using a computer? Because we can. Because it gives us joy. Because we learn.
Here are some things I learned when I started creating CSS art:
1. More CSS
When I created my first codepen to rebuild something that I found on dribbble with plain CSS, I knew nothing about skewing and all the fun things you could do with transforms, having just gotten my start as a junior developer. I had never even written a gradient background code before. So painstakingly, I learned. Later came animations, pseudo-classes, transform-origin, inset box shadows and all their friends.
By now my repertoire of CSS properties has tripled to what I knew previously which earned me the nickname CSSWizardress :)
2. Becoming faster
When you enjoy something, you do it more often. When you do it more often, you get better at it. Once you’re good at it, you get faster.
Creating CSS art obviously teaches you a lot of CSS, so naturally, the more you code, the better you get. Even though you probably won’t need to be able to code a sandwich with just using CSS (although, why wouldn’t you want to do that?), you probably have picked up a lot of shortcuts and neat tricks to achieve what you want, be it a tooltip, a nice button, or a cool hover effect on a UI element in a very short amount of time which in turn will impress your superiors or clients.
3. Write less code
One of the challenges of creating CSS with code only is to not use too many markup elements. People create entire graphics out of one div. It becomes an art form of itself. And even though less code isn’t always better in production, it helps a lot to know that you can make cool things without cluttering up your markup by using pseudo classes or gradients.
4. Community is key
As with many things, sharing what you created is a daunting thing to do and it was the same for me when I started making graphics out of code. In the beginning, I was quite shy about it but a lot of my work got featured on Codepen and in the CSS Animation newsletter. The feedback I got was great and made me more confident as a creator and developer. I’d like to think that by publishing my little creations other people will get inspired to create their own art in their own unique style.
Looking at other peoples code and talking to them teaches you a lot about your own way of doing things and I became better through looking at other peoples work.
Recently, I was invited to live code on stage at a Lemmings event which was scary and a lot of fun at the same time.
I’m excited to see where this will all lead and I’m looking forward to seeing all the great work people are going to make with this amazing tool. So give it a try, if you haven’t already. Maybe it will be fun, maybe you will even learn something. The important thing is to create.
Useful links
- Codepen — a great online editor / gallery for your work
- Daily CSS Images Challenge — an email challenge to help you come up with ideas
- CSS Quests — nothing going on there currently but I hope it will come back
- Sasha Tran on Youtube — Sasha creates CSS images and shares her process
