Tag Archive for: animation

Basic fade-in animation

/in /by

Workaround to avoid display: none problems.

Quick fix to my girlfriend’s vegan food

/in /by

Samsung loading screen animation

/in , /by

Simon Game

/in , , , /by

Have you ever played to Simon? That game where you have to memorize an incremental sequence of colors. Today I’m bring to you this famous game in ES6 using CSS transformations and animations. Open it in a new browser window or tab and stretch or shrink the area to see how the game is always visible, there are not scroll bar at all, pure responsiveness, enjoy the play 🙂

Code once, run everywhere: Simon Game in Google Play

Basic CSS transition using box-shadow

/in , /by

Would you like to set up a cool basic transition for your buttons when the cursor is over them?

  1. Create your HTML button. We have chosen the smile face character but you can use whatever you want (I normaly use Font Awesome).
  2. Define your CSS transition. In our case we want a period of 0.5 seconds every time our CSS changes and a transition effect with a slow start and end (ease-in-out).
transition: all 0.5s ease-in-out;

Our CSS will change if the mouse is over the button.

i { 
    box-shadow: 0 0 0 75px #E94F37 inset;
    color: white;
}

i:hover {
    box-shadow: 0 0 0 4px #E94F37 inset;
    color:#E94F37;
}

We are filling up the element with an inner shadow (inset) and changing the font color.

Here a real example: