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
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.
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.