DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Flipping UNO cards using only CSS
kapeel kokane
kapeel kokane

Posted on

Flipping UNO cards using only CSS

Today, when I opened twitter, I was greeted with this beautiful cards animation by Ellie. Here it is:

Liquid error: internal

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!
Cheers!

Top comments (2)

Collapse
kenbellows profile image
Ken Bellows

Nice! I tried my hand at animating cards with CSS a while back too, this was my result:

Collapse
indecisiverease profile image
Rease Kirchner

If you swapped out the design this would be a cool animation for a basic memory game! It would be cool to see the designs get more detailed as the player leveled up.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.