Take Time to Be Creative

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.

See the Pen Pure CSS Koala by Heather Tovey (@hrtovey) on CodePen.

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:

  • .image__container
  • .flower
  • .stem
  • .bulb
  • .bulb__bottom
  • .bulb__top
  • .petal
  • .petal.petal--reverse
  • .leaf
  • .leaf.leaf--reverse
  • .leaf.leaf--transparent

Creating pure CSS images really helps you to break down every component!

See the Pen Pure CSS Flower by Heather Tovey (@hrtovey) on CodePen.

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.

See the Pen Pure CSS Gemini by Heather Tovey (@hrtovey) on CodePen.

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!

See the Pen Stay At Home by Heather Tovey (@hrtovey) on CodePen.

The Letter H

I was browsing Codepen looking for inspiration and found a really awesome animation created with JavaScript.

While I love JavaScript, I also really appreciate all the things that CSS can do, and I want to fully explore CSS animation. So I decided to create the Letter H and then attempted to create a similar animation but solely with CSS. It’s not quite right, and I’m still learning CSS animation, but it’s not bad for a first try!

See the Pen Letter H by Heather Tovey (@hrtovey) on CodePen.

Happy Easter!

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.

See the Pen Happy Easter by Heather Tovey (@hrtovey) on CodePen.

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?

Leave a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *