loading...

7 days of CSS graphics and animations

kaykaycodes profile image Shanakay Hall ・Updated on ・5 min read

See those graphics up there? I did those! The best part is they are all made 100% of code. Yup, it's possible to create fun graphic art with just code alone.

During the Christmas 2019 break from classes I decided to challenge myself to create one CSS graphic a day for 7 days. I did it as a way to practice my CSS positioning and animation skills and because I wanted to create some cute code art after being inspired by some really cool Pens on CodePen. Over the 7 days I learned a lot and had opportunities to play around with CSS using shapes to create some fun and cute graphics. Here is recap of the 7 days and what I did.

Day 1 - Mr Bear

On the first day I took some inspiration from another Pen and decided to make a bear. I used only circles by doing a border radius of 50% on all the shapes. It was fairly simple and straightforward and took me about 30 minutes to do. I used gradients for the bubble gum to make it look a bit more realistic. For my first graphic I don't think it was too bad and I did it all without having to Google anything to my surprise.

Day 2 - Bouncing Margaret

Margaret is a coworker of mine who is always interested in seeing what I'm learning and the projects I'm working on. As a small gift I decided to make her a CSS graphic and show her all the code that goes along with it. At first I was just going to use shapes to make a face but then I thought some animation would make it more interesting. I decided to add a shadow at the bottom and made her head bounce while the shadow expands to match the movement of her head. This was kind of challenging at first syncing the two different animations of the head and shadow but with some tweaking I make it work.

Day 3 - Eggs for Breakfast

So anyone who knows me knows that I love my eggs in the morning - especially an egg salad sandwich. I was obviously feeling hungry when I started this one and decided to create a frying pan with fried eggs moving. For this one I played around with different border radius percentages on the frying pan handle. This took me about 45 minutes to complete and was pretty straightforward overall.

Day 4 - Hearts and Likes

This is second fave - mostly because of the colour scheme. I love pink! When you hover over the heart it beats. I worked with the :before and :after pseudo class to create the heart which is something I have never worked with before. Basically using :before and :after allows you to flip the shape and gives you the two parts of the heart. This wasn't easy at first because when I added an animation to the heart it kept on rotating to the left but then I realized I could just join the scale and rotate properties together in the animation key frames to straighten it and it eventually worked.

Day 5 - Sunny with Clouds Weather Report

This was probably one of the longer ones to complete and I lost track of time. I animated the clouds and sun to work in sync. The sun slowly reveals the border around it to make it look like it's pulsing and the clouds move left to right with the opacity set to 90% so it appears transparent. I took inspiration from the iPhone weather app for the colour palette.

Day 6 - Janky Christmas Tree

Day 6 was Christmas Day and honestly doing a CSS graphic was the last thing on my mind. I decided to go ahead and make something because I had already missed a couple days and wanted to get it out the way. After my family left I got to work and decided to do what was probably the most appropriate fo the occasion - a Christmas tree. I worked with triangles for the first time to create the tree and used circles for the lights. I call it a Janky Christmas Tree because to me it feels kind of rushed and patched up - which is true. I completed everything in about 45 minutes.

Day 7 - My Self Portrait

On the last day of the challenge I did a self portrait of myself with a blinking eyes animation and it's my favourite one (although I'm probably a little bit biased hehe). I thought finishing off the challenge with something more personal was a good idea. I used a lot of circles to create my curly hair. To make my shoulder area appear in the yellow box and not "overflow" into the background I used overflow:hidden on it. I also did the same on the styling for my mouth so my tongue wouldn't appear outside my mouth lol.

In Conclusion...

This challenge was great and allowed me to really practice and brush up on my CSS skills and I’m glad I decided to do it. I still have a long way to go and so much to learn but I’m pretty happy with the fact that I stuck to it and completed the challenge - even if I missed a couple days in between. I plan to make more CSS graphics when I have some more free time from classes again over Reading Week to add to the collection.

To see the above graphics and animations and more of my work visit my CopePen.

Discussion

pic
Editor guide
Collapse
jordanquiroz profile image
Jordan Quiroz

Wow such a amazing work!!, I love it!, I really suck at css so I'm working on it but I don't really know what to do, fo you have have any advice to improve??, thanks in advance. 😊

Collapse
kaykaycodes profile image
Shanakay Hall Author

Hey thank you! For me I would say keep practicing and experiment. YouTube is a great resource and I've learned a lot from watching tutorials there. Also, CodePen is great! I got a lot of inspiration from looking at other people's Pens. :)

Collapse
hinasoftwareengineer profile image
Hina-softwareEngineer

Amazing nice .....so much wonderful πŸ”₯πŸ”₯πŸ”₯

Collapse
kaykaycodes profile image
Shanakay Hall Author

Thank you so much! :D

Collapse
praveenkumarbk_ profile image
Praveen Kumar BK πŸ“±

I am a digital marketing professional. I want to learn HTML, CSS, Javascript & php. What do you advise? Where should I look for resources to learn

Collapse
tayambamwanza profile image
Tayamba Mwanza

Please help with resources for learning css drawing and animation, thanks :)

Collapse
kaykaycodes profile image
Shanakay Hall Author

Sure, here are some resources.

  • Creative Bloq article called "Get started with CSS art"
  • Medium article called "A Beginner’s Guide to Pure CSS Images"
  • YouTube...search "CSS animations"
  • Also CodePen is a good source for inspiration I find :)
Collapse
calebpitan profile image
Caleb Adepitan

This reminds me of a pen I saw that used box-shadow to paint Mona Lisa. It was spectacular, I mean this all graphics with css thing is spectacular. Keep it up

Collapse
kaykaycodes profile image
Shanakay Hall Author

Ohh that sounds cool. Wow!
Thanks alot!! :)

Collapse
umar_malik94 profile image
Umar Malik

This is epic. You've opened my eyes to new possibilities. Bravo!

Collapse
kaykaycodes profile image
Shanakay Hall Author

I'm so glad I could. Honestly the possibilities are endless. There is so much creative work you can do with it! :)

Collapse
marvin101 profile image
Paul Lakra

So beautiful and creative coding.

Collapse
kaykaycodes profile image
Shanakay Hall Author

Thank you so much!