CSS “art” has a very distinguish pro vs. anti vibe going on, and I’m never really sure why.
First, let’s dive into what CSS art is or what it means to me.
CSS Art is a creative outlet of using CSS to style elements on a page to look appealing visually.
Some people use it to recreate existing designs, artworks, or figures and some people go from an empty canvas.
The result is always some stunning magical piece of art that is powered by CSS.
It’s useless
The most common thing you’ll hear is people saying, but it’s useless. It has no purpose and even can be seen as a waste of time.
I’m always blown away by these remarks.
So are you saying art, in general, is useless? What’s the purpose of a painting?
What’s the purpose of a sculpture? Or a bit more relevant these days, what’s the purpose of an NFT?
I’ll leave it up to you to decide, though.
Why I do CSS art
I’m not sure if my ones contemplate “art”, but let’s state it is.
For me, it’s a super lovely outlet to try unique and not often used CSS techniques.
By making CSS art, my general CSS knowledge improves and becomes better.
For instance, creating this artwork taught me about double border-radius and how it works.
See the Pen My Neighbor Totoro by Chris Bongers (@rebelchris) on CodePen.
Or another one I did helped me understand the frosted effect.
See the Pen CSS Frosted glass creditcard by Chris Bongers (@rebelchris) on CodePen.
These are often elements I can use in my day-to-day CSS work but in a more obvious way.
How to get started?
I think this is one of the most asked questions, and it depends on what you are looking for.
For instance, if you’d like to get into pixel art, the process might be different.
I believe in creating to grow, and I find this the way that works for me.
Meaning, start by doing and exploring.
When I created the Totoro above, I started with an image and overlayed my CSS on this. Then when I got stuck, I asked Twitter for help, which helped me improve the piece.
So my best advice is to start with an image and overlay the image with divs and start working from there.
And as always, start small, take small steps, and work your way up to more significant pieces.
Another great way can be to indulge in CSS art challenges, you can find their pop-up more and more, and they are a great starting point for your first CSS artwork.
Learn from others
When trying to get into CSS art, keep a closeout for other people.
They might have techniques you haven’t seen before and can help you become better at them.
And like always you can learn from each other, they might find certain aspects of your works fascinating and the other way around.
With this said, share some of the works you are super proud of! Love to see them on Twitter 💖
Thank you for reading, and let’s connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter