Today, when I opened twitter, I was greeted with this beautiful cards animation by Ellie. Here it is:
ᴇʟʟɪᴇ ♡@ellie_html#100DaysOfCode DAY 89
Pure CSS Playing Cards with my own spin on the design. I have been playing cards so much during this lockdown!!
Took a break over the weekend as I’m really struggling with eye strain, still bad today so didn’t spend as long as I needed on these. Ugh 😩16:17 PM - 27 Apr 2020
I thought it was a really cool idea. So I set out to create something similar. Soon enough, I got an idea to implement the same for UNO cards as we are playing more and more of UNO during this lockdown period.
It was quite an interesting process to build the Illustration from scratch. Learned about:
- preserve-3d transform style
- linear-gradient text color using -webkit-linear-gradient
- Using the before and after pseudo selectors
- The flip-on-hover custom implementation.
Here is the codepen for the finished product:
Hope you are utilizing your free time too by building cool stuff!