Between following the news on COVID-19, homeschooling, social distancing, taking care of a now-7-month-old baby, and trying to keep up on work, you can say I’m a wee bit…overwhelmed. Maybe you’re feeling the same kind of pressure.
It’s time like these when it’s extra important to take care of yourself.
One way that I like to de-stress is by being creative. Taking time to be creative is fun and may even provide a few other benefits. Whether you’re a fan of knitting, painting, building websites, cooking, or another creative activity, make sure to build in some time to your schedule to enjoy your favorite activity. Even if it’s only for 5 minutes.
I’m learning how to create pure CSS images, so here are a few of my most recent projects. I’ll post my newest creations here as I go along.
What creative activities do you enjoy? Let me know in the comments below!
Pure CSS Koala
This creation is inspired by the free How to Make Pure CSS Images to Progress With Design-Focused Frontend Development course created by Mike Mangialardi. In this course, he walks you through learning some CSS principles by creating CSS images.
Since I’m already comfortable with CSS, I decided to create my own version of his Pure CSS Koala and even added a wee bit of animation.
Pure CSS Flower
This is one component of a larger project that I created. I was surprised by how many parts make up the flower as a whole.
To create this particular flower, I had to create the following
divs with these classes:
Creating pure CSS images really helps you to break down every component!
Pure CSS Gemini
Inspired by Olivia from O+CO Studio and her love of zodiac symbols, I decided to create a Pure CSS Gemini for my zodiac symbol.
Gemini is latin for “twins,” and the constellation looks like two stick figures side-by-side.
This pen uses a lot of gradients for the starry background, the twinkling effect, and the animated gradient on the main background. When I first started researching how to get the twinkling effect, I mostly saw people using images of stars and an overlay that they animated over the stars. But since this is all about being creative, I decided to emulate the effect with just background gradients.
Pure CSS Dribbble Design
I found this amazing artwork designed by Lizzie Morgan on Dribbble recently, and knew I had to try recreating it in CSS.
I think with more time, I could potentially make the CSS version more exact, but it’s definitely time-consuming trying to get the hand-drawn and rounded look. Getting the text to circle the rest of the image also took more time than I thought it would, but it was fun!
The Letter H
So many layers. So many polka dots. The most challenging part of this was to create the background patterns and have everything line up correctly.
I’ll add more Pure CSS Projects here as I create them, but I’d love to see your projects! Are you working on anything?