There's so much you can do in CSS. Style a link, add some fun animation, create the most fun buttons you've ever seen, etc! But what I'm particularly enjoying is pure CSS art.
If you haven't seen the kind of art that you can do with CSS (and HTML) alone, I highly recommend checking out Lynn Fisher's site dedicated to her Pure CSS work. This site specifically showcases all the fun artwork she's created using only a single div element.
It's incredible!
Inspired by her work, I've also tried my hand at creating some Pure CSS art. I haven't limited myself to a single div (pacing myself!), but I've had a ton of fun experimenting with different techniques.
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.