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.
Or another one I did helped me understand the frosted effect.
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
Top comments (9)
I haven't done CSS art much but generally for css I like to draw my idea on paper first.
It gives a good idea of how I want to wrap the content and how I would like to position it.
That frosted effect codepen looks awesome Chris,
I have till now only made a cute cactus would definitely try that frosted effect once I gain some experience.
Nice article.
Oh that's a nice approach, I really want to try that as well to create some of my own drawings in CSS.
Its learning by doing. Often the journey is more important than the destination. You can learn and have fun on the journey. You won't hang up the CSS Art in a gallery ๐ People need to be less precious and judgemental
True!
Well it might come to that soon ๐
It does not have to be that hard, I already explained in simple steps how to create twitter header (css art) using Tailwind css here
dev.to/nagi/the-extensive-guide-to...
CSS Art is useless. So is poetry, painting, singing...
Some days, I really wish programming was useless too. Usefulness, to art, is a curse, not a blessing.
Very true, and beautifully worded ๐
CSS Art is such a great way to enhance your skill set. You learn so many new things when you craft things other than layouts.
100% agree, I've learned some amazing techniques from CSS art that I could use in my layouting skills.