Earlier this week, one of my co-workers found a single div all CSS image of Admiral Grace Hopper by Trish Katz on CodePen. It seemed like magic — I’ve written thousands and thousands of lines of CSS for projects I’ve worked on but this was on a different level! I immediately wanted to learn more.
Single Div Grace Hopper
I am not an artist in any way, shape, or form. I manage to make my sites look okay by keeping them as simple as possible and relying heavily on material design rules. Drawing things in CSS seemed like a challenge I couldn’t turn down!
The Process
I started doing research on CSS art and found some great resources such as: Sasha Tran, Coding Artist, and the #PureCSS hashtag on Twitter. Through these resources, I ended up finding a tutorial called “How to Make Pure CSS Images to Progress With Design-Focused Frontend Development” by the Coding Artist. He went through how to create an adorable Koala cartoon using just CSS.
I found the way that he broke down the different components of the Koala really interesting. It turns out, CSS art is created by filling in, resizing, and reshaping divs. A div is an HTML element that doesn’t by default do anything — it is mostly used for grouping elements and applying styles. Since they don’t have any default behaviors we can easily add styles to them! Each different shape on the koala is a div that has a CSS selector on it. I found that a lot easier than the single div art I had seen previously!
From there, I decided to play around with the Koala CodePen and modify it. With a lot of trial and error, I ended up with this cartoon portrait of my dog. Again, I am so not an artist.
Cartoon Dog Portrait
Below, I included a snippet of what some of the code looks like and what it does. All of the code below also applies to normal CSS — CSS art is a great place to practice your normal CSS skills! For example, the code for the dog's head is below:
.head {
background-color: black; /* the color of the div black */
position: absolute; /* hard places the div instead of allowing responsiveness or relating it to other divs */
top: 16.5%; /* where the top of the div will be placed */
left: 25%; /* where the div will start horizontally */
width: 50%; /* what percentage of the parent div the div will take up horizontally */
height: 67%; /* what percentage of the parent div the div will take up vertically*/
border-radius: 50%; /* makes the div round! */
}
It's just normal CSS being used for art instead of a website layout!
One of the most helpful tools I found was Clippy which allows you to draw out CSS clip paths and generate the code for the shape you want to draw! CSS allows circular and square shapes by default, but when you want to use triangles or other non-standard shapes it gets a bit trickier. We have to calculate the coordinates of the paths we want to draw. Since this path math can get pretty dicey pretty fast, I really enjoyed using Clippy to make that process easier.
The Final Project
Once I had the working dog, I decided that I wanted to write something I could use outside of a CodePen, so I built a webpage with a floral pattern.
I started out by using CodePen to draw out the different flower shapes that I wanted to include. I ended up using three: one with long ovals for petals (the white flowers), one with teardrop shaped petals (the pink ones), and then one made up of circles (the yellow ones). By this point, I was fairly comfortable creating shapes and editing them using CSS.
Somewhere along the way, I decided that it was getting really cumbersome to draw out all of the flowers manually, and I decided to use React to dynamically create them — I totally cheated! I still did 90% of the work with CSS, but I got annoyed by having so many divs and instead wrote some of them iteratively using React. For context, each one of the white flowers is made up of 21 divs — 20 petals and one for the center. I wrote code that generated those petals and their coordinates!
Image of the final project
The final code is here and the page it generated is deployed here. I also ended up using it as my desktop background!
Next Steps
Learning CSS art was really fun, and I think that the concepts from it will definitely everyday CSS become stronger! I am still far from an artist, but CSS art could be a good artistic outlet for me moving forwards. Overall, I had a lot of fun with this project and I really like the output!
Part of my On Learning New Things series!
Top comments (10)
Wow I had no idea this was possible! 🌟
Hi Ali! Thanks a lot. Your article was super inspiring and clear.
I´m pretty sure that the code can be MUCH better, but I´m pretty happy with the final result:
CSS IS rough... especially for non web dev kids lol
I've written a little script that blasts some content out into the world. what data points and types would you need - supposing I wanted a dark background, a bunch of cool geometry with of polygonal symmetry of "n" sides etc. etc.. and your code spit out a piece of artwork?
i'm new to coding by I could perhaps send a webhook with the values in JSON format... could this be built as a standalone api?
did you listened about Codevember?
I have heard of it! It sounded like a lot for this year, but maybe next year! Did you participate?
I made 1 or 2, I had exams this month.
Nice! This inspires me to do the same. Thank you for sharing your experience
this is AWESOME....
that's pretty awesome
That's really neato. You get one unicorn ( which is better than a heart, isn't it? )