Shapes Of CSS

#rectangle {
    width: 200px;
    height: 100px;
}
#circle { 
    width: 100px; 
    height: 100px;
    border-radius: 50px; 
}

Ref: https://css-tricks.com/examples/ShapesOfCSS/

CSS Triangle

Login

CSS Transition

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

.hand {
    width:34px;
    height:34px;
    border-radius: 34px;
    transform: scaleY(0.6);
}

.hand {
    transition: 0.3s ease-out;
}
/* status 1 */
.hand {
    transform: scaleY(0.6);
}
/* status 2 */
.password .hand {
    transform: translateX(42px) translateY(-15px) scale(0.7);
}

.arm {
    background-image:url;
    transform: scaleY(0.6);
}
.arm.arm-r {
    transform: scaleX(-1);
}

.arm {
    transition: 0.3s ease-out;
}
/* status 1 */
.arm {
    transform: scaleY(0.6);
}
/* status 2 */
.password .arm {
    transform: translateY(-40px) translateX(40px); 
}

Result

Signup

Key:

• sprite
• background-position

Loading

CSS Animation

/* @keyframes duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

Hands

.hands {
    animation: spin 0.5s steps(5) infinite;
    background: url(sprite_spinner-hands.png);
}
/* steps(5) only 5 keyframes happen in 0.5s. */

@keyframes spin {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 -1015px
    }
}

Face

.face {
    animation: 
        pfft 1s steps(1) 1 8s,
        haha 0.5s steps(2, end) 11s 10,
        oops 10s steps(1) 16s 1;
}
@keyframes pfft {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 -121px
    }
}
@keyframes haha {
    0% {
        background-position: 0 -243px
    }

    100% {
        background-position: 0 -486px
    }
}
@keyframes oops {
    0% {
        background-position: 0 -486px
    }

    100% {
        background-position: 0 -607px
    }
}

Team

Key:

• CSS Sprite
• Cursor position -> background-position

Inspiration

• Little Big Details

• CSS Design Award

• AWWWARDS

Key:

1. clip-path to draw the wall (chrome only)

2. CSS transitions to slowly move the scenery

3. Hover states for the two walls (and the "game over" screen)