Skip to content

Instantly share code, notes, and snippets.

/Gameboy-(full-CSS).markdown

Created January 5, 2015 00:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/25e737dd834914bcf38b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/25e737dd834914bcf38b to your computer and use it in GitHub Desktop.
Download ZIP
Gameboy (full CSS)
Raw
index.haml
#container
#back
#border
#card3
#card2
#chip2
#screenBack
#card1
#speaker
#chip
#chipPinL
#chipPinR
#ec1
#volumeWheelBack
#volumeWheel
#joystickBack
#buttonsABBack
#buttonsSSBack
#jackBack
#jack
#ec2
#powerBack
#power
#box
#screen
#screen2
#joystickCross1
#joystickCross2
#buttonsSS
#buttonsSSText
#buttonsAB
#buttonsABText
#gameboyText GAME BOY
#powerLed
#speakerFilter
Raw
style.scss
@import "compass/css3";
@font-face{
font-family: "gyre";
src: url('http://ff.static.1001fonts.net/t/e/tex-gyre-adventor.bold-italic.otf?#iefix') format("opentype");
}
@mixin animation($name, $duration, $repeat) {
-webkit-animation: $name $duration $repeat;
-moz-animation: $name $duration $repeat;
-o-animation: $name $duration $repeat;
animation: $name $duration $repeat;
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
body {
background-color: #dfbf5c;
}
#container {
position: relative;
margin: auto;
width: 130px;
height: 220px;
}
#back {
position: absolute;
bottom: 0;
background-color: #c1bdb7;
box-shadow: 5px 5px 0 0 #c7ab52;
@include animation(backAnim, 5s, infinite);
}
@include keyframes(backAnim) {
0% {
width: 8px;
height: 68px;
}
4% {
width: 100px;
height: 75px;
}
5% {
width: 125px;
height: 80px;
border-radius: 3px 3px 20px 3px;
}
11%, 100% {
height: 206px;
width: 125px;
border-radius: 3px 3px 20px 3px;
}
}
#speaker
{
position: absolute;
background-color: #646060;
@include animation(speakerAnim, 5s, infinite);
}
@include keyframes(speakerAnim) {
0%, 6% {
width: 0px;
height: 0px;
bottom: 22px;
left: 103px;
}
11% {
width: 30px;
height: 30px;
bottom: 7px;
left: 88px;
border-radius: 15px;
box-shadow: inset 0px 0px 0px 15px #484848;
}
14%, 100% {
width: 30px;
height: 30px;
bottom: 7px;
left: 88px;
border-radius: 15px;
box-shadow: inset 0px 0px 0px 8px #484848;
}
}
#card1
{
position: absolute;
left: 15px;
background-color: #5eaf89;
@include animation(card1Anim, 5s, infinite);
}
@include keyframes(card1Anim) {
0%, 8% {
height: 0px;
width: 0px;
bottom: 64px;
}
9% {
height: 17px;
width: 15px;
bottom: 64px;
}
12%{
height: 113px;
width: 15px;
bottom: 17px;
}
18%, 100% {
height: 113px;
width: 95px;
bottom: 17px;
}
}
#border
{
position: absolute;
bottom: 2px;
right: 7px;
border: 2px solid #646060;
border-radius: 3px 3px 20px 3px;
@include animation(borderAnim, 5s, infinite);
}
@include keyframes(borderAnim) {
0%, 8% {
height: 0px;
width: 0px;
border: none;
}
9% {
height: 40px;
width: 10px;
border-right: 2px solid #646060;
border-bottom: 2px solid #646060;
border-top: none;
border-left: none;
}
13% {
height: 40px;
width: 117px;
border-right: 2px solid #646060;
border-bottom: 2px solid #646060;
border-top: none;
border-left: none;
}
17% {
height: 198px;
width: 117px;
border-right: 2px solid #646060;
border-left: 2px solid #646060;
border-bottom: 2px solid #646060;
border-top: none;
}
18%, 100% {
height: 198px;
width: 117px;
border: 2px solid #646060;
}
}
#card2
{
position: absolute;
bottom: 6px;
left: 7px;
width: 10px;
height: 20px;
background-color: #646060;
@include animation(card2Anim, 5s, infinite);
}
@include keyframes(card2Anim) {
0%, 12% {
height: 0px;
width: 0px;
}
13% {
height: 20px;
width: 10px;
}
21%, 100% {
height: 20px;
width: 78px;
}
}
#card3
{
position: absolute;
bottom: 48px;
left: 8px;
height: 5px;
background-color: #3c9b66;
@include animation(card3Anim, 5s, infinite);
}
@include keyframes(card3Anim) {
0%, 12% {
height: 0px;
width: 0px;
}
15% {
height: 5px;
width: 110px;
}
23%, 100% {
height: 150px;
width: 110px;
}
}
#chip
{
position: absolute;
bottom: 46px;
left: 54px;
width: 4px;
height: 4px;
background-color: #484848;
@include animation(chipAnim, 5s, infinite);
}
@include keyframes(chipAnim) {
0%, 15% {
height: 0px;
width: 0px;
}
16% {
height: 4px;
width: 4px;
bottom: 46px;
left: 54px;
}
20%, 100% {
height: 22px;
width: 22px;
bottom: 37px;
left: 45px;
}
}
#chip2
{
position: absolute;
bottom: 132px;
left: 60px;
width: 4px;
height: 12px;
background-color: #484848;
@include animation(chip2Anim, 5s, infinite);
}
@include keyframes(chip2Anim) {
0%, 16% {
height: 0px;
width: 0px;
}
17% {
height: 12px;
width: 4px;
bottom: 132px;
left: 60px;
}
23% {
height: 12px;
width: 60px;
bottom: 132px;
left: 32px;
}
30%, 100% {
height: 12px;
width: 60px;
bottom: 160px;
left: 32px;
}
}
#volumeWheelBack
{
position: absolute;
left: 108px;
bottom: 157px;
width: 10px;
height: 10px;
background-color: #645d5f;
@include animation(volumeWheelBackAnim, 5s, infinite);
}
@include keyframes(volumeWheelBackAnim) {
0%, 17% {
height: 0px;
width: 0px;
left: 113px;
bottom: 162px;
}
21%, 25% {
height: 10px;
width: 10px;
left: 108px;
bottom: 157px;
}
30%, 100% {
height: 10px;
width: 10px;
left: 108px;
bottom: 167px;
}
}
#volumeWheel
{
position: absolute;
left: 108px;
bottom: 157px;
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #b2aea9;
box-shadow: inset 0px 0px 0px 5px #dddddd;
@include animation(volumeWheelAnim, 5s, infinite);
}
@include keyframes(volumeWheelAnim) {
0%, 18% {
height: 1px;
width: 1px;
left: 115px;
bottom: 159px;
box-shadow: inset 0px 0px 0px 10px #dddddd;
}
22% {
height: 16px;
width: 16px;
left: 110px;
bottom: 154px;
box-shadow: inset 0px 0px 0px 10px #dddddd;
}
25% {
height: 16px;
width: 16px;
left: 110px;
bottom: 154px;
box-shadow: inset 0px 0px 0px 5px #dddddd;
}
30%, 100% {
height: 16px;
width: 16px;
left: 110px;
bottom: 164px;
box-shadow: inset 0px 0px 0px 5px #dddddd;
}
}
#chipPinL
{
position: absolute;
left: 43px;
bottom: 54px;
width: 4px;
height: 2px;
background-color: #dddddd;
box-shadow: 0px 3px #dddddd;
@include animation(chipPinAnimL, 5s, infinite);
}
@include keyframes(chipPinAnimL) {
0%, 19% {
width: 0px;
}
20% {
width: 4px;
box-shadow: 0px 3px #dddddd;
}
21% {
box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
}
22%, 100% {
box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
}
}
#chipPinR
{
position: absolute;
left: 65px;
bottom: 54px;
width: 4px;
height: 2px;
background-color: #dddddd;
box-shadow: 0px 3px #dddddd;
@include animation(chipPinAnimR, 5s, infinite);
}
@include keyframes(chipPinAnimR) {
0%, 22% {
width: 0px;
}
23% {
width: 4px;
box-shadow: 0px 3px #dddddd;
}
24% {
box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
}
25%, 100% {
box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
}
}
#ec1
{
position: absolute;
left: 24px;
bottom: 122px;
width: 4px;
height: 4px;
border-radius: 2px;
background-color: #484848;
@include animation(ec3Anim, 5s, infinite);
}
@include keyframes(ec3Anim) {
0%, 18% {
width: 0px;
}
20% {
width: 4px;
height: 4px;
}
22% {
box-shadow: 8px 0px #484848;
}
24% {
box-shadow: 8px 0px #484848, 16px 0px #484848;
}
26% {
box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848;
}
28% {
box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848;
}
30%, 100% {
box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848, 40px 0px #484848;
}
}
#joystickBack
{
position: absolute;
left: 8px;
bottom: 47px;
width: 36px;
height: 36px;
border-radius: 18px;
background-color: #dddddd;
@include animation(joystickBackAnim, 5s, infinite);
}
@include keyframes(joystickBackAnim) {
0%, 23% {
left: 26px;
bottom: 65px;
width: 0px;
height: 0px;
}
28%, 100% {
left: 8px;
bottom: 47px;
width: 36px;
height: 36px;
}
}
#joystickCross1
{
position: absolute;
left: 11px;
bottom: 60px;
width: 30px;
height: 10px;
border-radius: 1px;
background-color: #484848;
@include animation(joystickCrossAnim, 5s, infinite);
}
#joystickCross2
{
position: absolute;
left: 11px;
bottom: 60px;
width: 30px;
height: 10px;
border-radius: 1px;
background-color: #484848;
@include rotate(90deg);
@include animation(joystickCrossAnim, 5s, infinite);
}
@include keyframes(joystickCrossAnim) {
0%, 26% {
left: 26px;
bottom: 65px;
width: 0px;
height: 0px;
}
33%, 100% {
left: 11px;
bottom: 60px;
width: 30px;
height: 10px;
}
}
#buttonsABBack {
position: absolute;
left: 70px;
bottom: 55px;
width: 50px;
height: 22px;
border-radius: 11px;
background-color: #dddddd;
box-shadow: inset 0px 0px 0px 2px #a9a9a9;
@include rotate(160deg);
@include animation(buttonsABBackAnim, 5s, infinite);
}
@include keyframes(buttonsABBackAnim) {
0%, 24% {
left: 95px;
bottom: 67px;
width: 0px;
height: 0px;
@include rotate(220deg);
}
29% {
left: 70px;
bottom: 55px;
width: 50px;
height: 22px;
-webkit-transform:rotate(160deg);
@include rotate(160deg);
}
33%, 100% {
box-shadow: inset 0px 0px 0px 2px #a9a9a9;
}
}
#buttonsAB {
position: absolute;
left: 74px;
bottom: 53px;
width: 16px;
height: 16px;
border-radius: 11px;
background-color: #484848;
box-shadow: 26px -10px #484848;
@include animation(buttonsABAnim, 5s, infinite);
}
@include keyframes(buttonsABAnim) {
0%, 28% {
left: 81px;
bottom: 61px;
width: 0px;
height: 0px;
box-shadow: 26px -10px #484848;
}
33%, 100% {
left: 74px;
bottom: 53px;
width: 16px;
height: 16px;
box-shadow: 26px -10px #484848;
}
}
#buttonsABText {
@include animation(buttonsABTextAnim, 5s, infinite);
}
#buttonsABText::before {
content: "A";
position: absolute;
left: 106px;
bottom: 50px;
font: 8px "Arial";
color: #606060;
}
#buttonsABText::after {
content: "B";
position: absolute;
left: 80px;
bottom: 40px;
font: 8px "Arial";
color: #606060;
}
@include keyframes(buttonsABTextAnim) {
0%, 73% {
visibility: hidden;
}
74%, 100% {
bisibility: visible;
}
}
#buttonsSSText {
@include animation(buttonsSSTextAnim, 5s, infinite);
}
#buttonsSSText::before {
content: "select";
position: absolute;
left: 45px;
bottom: 15px;
font: 7px "Arial";
color: #606060;
}
#buttonsSSText::after {
content: "start";
position: absolute;
left: 68px;
bottom: 15px;
font: 7px "Arial";
color: #606060;
}
@include keyframes(buttonsSSTextAnim) {
0%, 75% {
visibility: hidden;
}
76%, 100% {
bisibility: visible;
}
}
#buttonsSSBack {
position: absolute;
left: 45px;
bottom: 26px;
width: 40px;
height: 10px;
background-color: #dddddd;
@include animation(buttonsSSBackAnim, 5s, infinite);
}
@include keyframes(buttonsSSBackAnim) {
0%, 27% {
left: 65px;
bottom: 26px;
width: 0px;
height: 10px;
}
33%, 100% {
left: 45px;
bottom: 26px;
width: 40px;
height: 10px;
}
}
#buttonsSS {
position: absolute;
border-radius: 2px;
background-color: #484848;
@include animation(buttonsSSAnim, 5s, infinite);
}
@include keyframes(buttonsSSAnim) {
0%, 34% {
left: 52px;
bottom: 31px;
width: 0px;
height: 0px;
box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
}
41%{
left: 45px;
bottom: 29px;
width: 14px;
height: 4px;
box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
}
44%{
left: 48px;
bottom: 29px;
width: 14px;
height: 4px;
box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 20px 0px #a9a8a6;
}
49%, 100% {
left: 48px;
bottom: 29px;
width: 14px;
height: 4px;
box-shadow: inset 0px 0px 0px 0px #a9a8a6, 20px 0px 0px 0px #484848, 20px 0px #a9a8a6;
}
}
#screenBack {
position: absolute;
background-color: #dddddd;
border-radius: 2px;
@include animation(screenBackAnim, 5s, infinite);
}
@include keyframes(screenBackAnim) {
0%, 25% {
left: 63px;
bottom: 125px;
width: 0px;
height: 64px;
}
31%, 100% {
left: 21px;
bottom: 125px;
width: 84px;
height: 64px;
}
}
#screen {
position: absolute;
background-color: #494949;
border-radius: 4px 4px 10px 4px;
@include animation(screenAnim, 5s, infinite);
}
@include keyframes(screenAnim) {
0%, 28% {
left: 68px;
bottom: 131px;
width: 0px;
height: 0px;
}
33%, 36% {
left: 26px;
bottom: 100px;
width: 74px;
height: 64px;
}
40%, 42% {
left: 26px;
bottom: 114px;
width: 74px;
height: 64px;
}
48%, 100% {
left: 8px;
bottom: 100px;
width: 110px;
height: 96px;
}
}
#jackBack {
position: absolute;
background-color: #646060;
@include animation(jackBackAnim, 5s, infinite);
}
@include keyframes(jackBackAnim) {
0%, 21% {
left: 11px;
bottom: 136px;
width: 0px;
height: 0px;
}
25%, 31% {
left: 6px;
bottom: 132px;
width: 12px;
height: 12px;
}
36%, 100% {
left: 6px;
bottom: 138px;
width: 12px;
height: 12px;
}
}
#jack {
position: absolute;
background-color: #494949;
border-radius: 7px;
@include animation(jackAnim, 5s, infinite);
}
@include keyframes(jackAnim) {
0%, 23% {
left: 6px;
bottom: 135px;
width: 0px;
height: 0px;
}
27%, 31% {
left: 1px;
bottom: 131px;
width: 14px;
height: 14px;
}
36%, 100% {
left: 1px;
bottom: 137px;
width: 14px;
height: 14px;
}
}
#screen2 {
position: absolute;
background-color: #b7b28f;
border-radius: 2px;
@include animation(screen2Anim, 5s, infinite);
}
@include keyframes(screen2Anim) {
0%, 44% {
left: 59px;
bottom: 151px;
width: 0px;
height: 0px;
}
48% {
left: 54px;
bottom: 146px;
width: 10px;
height: 10px;
}
52% {
left: 22px;
bottom: 146px;
width: 80px;
height: 10px;
}
60%, 100% {
left: 22px;
bottom: 112px;
width: 80px;
height: 74px;
}
}
#box {
position: absolute;
background-color: #5f98c6;
border-radius: 3px 3px 20px 3px;
height: 206px;
width: 125px;
bottom: 0px;
@include animation(boxAnim, 5s, infinite);
}
@include keyframes(boxAnim) {
0%, 67% {
height: 0px;
width: 125px;
bottom: 206px;
}
80%, 100% {
height: 206px;
width: 125px;
bottom: 0px;
}
}
#gameboyText {
position: absolute;
left: 23px;
bottom: 93px;
height: 20px;
width: 40px;
font: 7px "gyre";
color: #b7b28f;
clip:rect(0px, 0px, 40px, 20px);
@include animation(gameboyTextAnim, 5s, infinite);
}
@include keyframes(gameboyTextAnim) {
0%, 55% {
clip:rect(0px, 0px, 20px, 0px);
}
60%, 100% {
clip:rect(0px, 40px, 20px, 0px);
}
}
#powerBack {
position: absolute;
background-color: #494949;
width: 15px;
height: 9px;
left: 6px;
bottom: 197px;
@include animation(powerBackAnim, 5s, infinite);
}
@include keyframes(powerBackAnim) {
0%, 23% {
height: 0px;
}
30%, 100% {
height: 9px;
}
}
#power {
position: absolute;
background-color: #494949;
border-radius: 4px 4px 0px 0px / 2px 2px 0px 0px;
width: 8px;
height: 6px;
visibility: visible;
@include animation(powerAnim, 5s, infinite);
}
@include keyframes(powerAnim) {
0%, 42% {
visibility: hidden;
left: 9px;
bottom: 197px;
}
43% {
visibility: visible;
left: 9px;
bottom: 197px;
}
46%, 90% {
visibility: visible;
left: 9px;
bottom: 202px;
}
92%, 100% {
visibility: visible;
left: 15px;
bottom: 202px;
}
}
#powerLed {
position: absolute;
background-color: #202020;
border-radius: 2px;
width: 4px;
height: 4px;
left: 10px;
bottom: 180px;
@include animation(powerLedAnim, 5s, infinite);
}
@include keyframes(powerLedAnim) {
0%, 49% {
width: 0px;
height: 0px;
left: 12px;
bottom: 172px;
}
52%, 91% {
background-color: #202020;
width: 4px;
height: 4px;
left: 10px;
bottom: 170px;
}
92%, 100% {
background-color: red;
width: 4px;
height: 4px;
left: 10px;
bottom: 170px;
}
}
#speakerFilter {
position: absolute;
background-color: #555;
border-radius: 2px;
width: 4px;
height: 4px;
left: 95px;
bottom: 20px;
visibility: visible;
box-shadow: 3px -3px #555, 6px -6px #555, 9px -9px #555, 0px 6px #555,3px 3px #555, 6px 0px #555, 9px -3px #555, 12px -6px #555, 15px -9px #555, 3px 9px #555, 6px 6px #555, 9px 3px #555, 12px 0px #555, 15px -3px #555, 18px -6px #555, 9px 9px #555, 12px 6px #555, 15px 3px #555, 18px 0px #555;
@include animation(speakerFilterAnim, 5s, infinite);
}
@include keyframes(speakerFilterAnim) {
0%, 75% {
visibility: hidden;
}
76%, 100% {
visibility: visible;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment