Member-only story
Making CSS Art
Even though CSS art existed since availability of rounded corners, recently this art form has taken deeper roots. Given its limited nature, creating CSS art requires thinking outside the box model.
Here’s a list of my best web development tutorials.
Complete CSS flex tutorial on Hashnode.
Ultimate CSS grid tutorial on Hashnode.
Higher-order functions .map, .filter & .reduce on Hashnode.
Follow me @ Twitter, Instagram & fb to never miss premium articles.
But wait. What exactly is CSS art? CSS paintings are hinged on exploiting Cascading Style Sheets — a language created for styling HTML documents by using its features in a way that wasn’t originally intended.
In this tutorial I will use ArtBox because it makes CSS art easier to explain. But the same techniques will work in Chrome and other browsers.
A Clockwork Orange
This is a current WIP of the Clockwork Orange poster art. It will probably take another week to finish the face at which point the image will be updated but I had to publish the article since it’s already getting quite long.
ArtBox is like Photoshop for CSS — it’s an editor created specifically for making CSS art (also known as CSS painting.) If you’re a graphic designer or just someone with art background, you can get it in Early Access from its official website at ArtBox where you can obtain your license.
The classic Clockwork Orange poster art re-created in CSS ArtBox editor.
Mona Lisa Hands
Here’s another example that explores some possibilities.
