flipping Smart Cards

flipping Smart Cards

Animations with CSS are awesome! There are easy to create with simple properties and you can use them in many components. in this case, we will use the Flipping Card effect as the representation of an artist presentation card with information in the front and back of it.  Also, it will have a smart button, that will change its color depending of the availability of the person in the card.  So, let’s go and put our code and planning to the test.
The Art Game

The Art Game

The facts

The Art Game is a Facebook web app that allows the user to play an art trivia game.  It grew from the idea to have a Facebook app example that will bond two of my pleasures, the first is art and the second is programing.

The game was created using PHP-MySQL for the game backend, it has is very simple CRUD administration (Create, Read, Update and Delete) interface to manage the data for the questions, answers, point value and others.  For the frontend, it uses JQuery and the Facebook’s JSDK. So, the user will be greeted with he’s Facebook name at the beginning of the game.


You can play the game here

The Design

After conceiving the idea of creating the game, I´d begun to develop the main character, in this case a little French artist with he’s petit beret and a great moustache. I’d added small changes to the character to represent the right and wrong answer.

These small changes worked perfectly for the modal window.

I’d used the single page design method to make a fast and reliable game. The only thing that changes in whole design is the text and the image of the modal window.

What’s next. Probably I will add a friend score zone, so the player could compete with he’s Facebook friends and increment the question count to a hundred, so in this way will add up the variety of the game play.