Flappy Bird in CSS

HTML

<div class="inter">
<div class="content">
  <label class="score">13</label>
  <div class="pause"></div>
  

  <div class="tunel _1"></div>
  <div class="tunel _2"></div>
  <div class="tunel _3"></div>
  <div class="tunel _4"></div>

  <div class="cloud _c1"></div>
  <div class="cloud _c2"></div>
  <div class="cloud _c3"></div>
  <div class="cloud _c4"></div>
  <div class="cloud _c5"></div>
  <div class="cloud _c6"></div>
  <div class="cloud _c7"></div>
  <div class="cloud _c8"></div>
  <div class="cloud _c10"></div>

  <div class="trie _t1"></div>
  <div class="trie _t2"></div>
  <div class="trie _t3"></div>
  <div class="trie _t4"></div>
  <div class="trie _t5"></div>
  <div class="trie _t6"></div>
  <div class="trie _t7"></div>
  <div class="trie _t8"></div>
  <div class="trie _t9"></div>

  <div class="building _b1"></div>
  <div class="building _b2"></div>
  <div class="building _b3"></div>
  <div class="building _b4"></div>
  <div class="building _b5"></div>
  <div class="building _b6"></div>
  <div class="building _b7"></div>
  <div class="building _b8"></div>
  <div class="building _b9"></div>
  <div class="building _b10"></div>
  <div class="building _b11"></div>
  <div class="building _b12"></div>

 <div class="flappy_bird">
  <span class="momo"></span>
  <div class="levre _l1"></div>
  <div class="levre _l2"></div>
</div>

</div>
  
  <div class="floor">
    <div class="under_floor">
    </div>
  </div>
  
</div>
<footer>
  <label><a href="http://www.facebook.com/biodos">Created By :Hajji Tarek</a></label>
</footer>

CSS

body {
   background: #f9f124;
	background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, rgba(0, 0, 0,0)), color-stop(0.4, #fd684b));
	background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0) 50%, #fd684b 40%);
	background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0) 50%, #fd684b 40%);
	background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0) 50%, #fd684b 40%);
	background-image: linear-gradient(360deg, rgba(0, 0, 0, 0) 50%, #fd684b 40%);
	background-size: 15px 71px;
}
.inter
{
  margin:10px auto;
  height:350px;
  width:230px;
  background:#71c5cf;
  overflow:hidden;
  border:rgb(20,20,20) solid;
  border-top:80px solid rgb(20,20,20);
  border-left:20px solid rgb(20,20,20);
  border-right:20px solid rgb(20,20,20);
  border-bottom:100px solid rgb(20,20,20);
  border-radius:30px;
  box-shadow:0px 1px 0px rgb( 106, 106, 106),
             1px 0px 0px rgb(106, 106, 106),
            -1px 1px 0px rgb(106, 106, 106),
            0px -1px 0px rgb(106, 106, 106),
            -1px -1px #AAA, 
            1px 1px #333, 
            1px 1px #888 inset, 
            -1px -1px #bbb inset, 
            10px 10px 50px 0 #111;
}
.inter:after
{
  z-index:11;
  position:absolute;
  content:'';
  height:56px;
  width:56px;
  border-radius:50%;
  background:rgb(10,10,10);
  box-shadow:inset 0px -5px 10px rgba(106, 106, 106,.1);
  margin:15px 80px;
  border:1px solid #000;
}
.inter:before
{
  z-index:12;
  position:absolute;
  content:'';
  height:20px;
  width:20px;
  border-radius:5px;
  background-color:transparent;
  border:2px solid rgba(100,100,100,.3);
  margin:387px 96px;
}
.floor
{
  height:40px;
  width:100%;
  background:#ddd894;
  margin-top:310px;
  border-top:5px solid #d6ba70;
}
.under_floor
{
  border-top:6px dotted #6fb926;
  box-shadow:1px 1px 1px #447f21;
  background:#97e754;
  margin-top:-10px;
}
.content
{
  width: 230px;
height: 303px;
position: absolute;
  border-bottom:2px solid #432849; 
  overflow:hidden;
}
.pause
{
  background:#e56400;
  position:absolute;
  height:22px;
  width:22px;
  margin:10px;
  border:2px solid #5c4600;
  border-bottom:4px solid #542801;
  box-shadow: 1px 1px 1px white inset;
}
.score{
  position:absolute;
  color:white;
  text-shadow:2px 1px black,
              -2px 1px black,
               2px -2px black,
                1px -2px black;   
  font-size:19px;
  margin:15px 43%;
font-family: 'Erica One', cursive;
}
.pause:after , .pause:before
{
  content:'';
  position:absolute;
  background:#fff;
  width:5px;
  height:15px;
  z-index:1;
  margin-left:5px;
  margin-top:4px;
  border-bottom:1px solid #ad4007;
}
 .pause:before {
   margin-left:12px;
 }
.tunel
{
  position:absolute;
  height:140px;
  width:32px;
  margin-left:40px;
  background:#74bf2e;
  border:1px solid #502946;
  z-index:5;
  box-shadow:inset 3px 0px 2px #9ae75b ,
             inset 5px 0px 1px #f3fc85 ,
             inset 8px 0px 2px #9ae75b ,
             inset 9px 0px 2px #71bc2b ,
             inset 11px 0px 2px #9ae75b ,
    /*--------------------------------------*/
             inset -4px 0px 1px #538127 ,
             inset -6px 0px 1px #78c32a ,
             inset -8px 0px 1px #4d7e22 ;
margin-top:-2px;
}

._1{margin-top:223px;height:80px;}
._2{margin-top:173px;margin-left:150px;height:130px;}
._3{margin-left:150px;height:85px;}

._1:after , ._2:after , ._3:after ,._4:after
{
   width:42px;
    height:14px;
    content:'';
    z-index:6;
   background:#74bf2e;
  position:absolute;
  margin:-14px 0px 0px -6px;
   box-shadow:inset 3px 0px 2px #9ae75b ,
             inset 5px 0px 1px #f3fc85 ,
             inset 8px 0px 2px #9ae75b ,
             inset 9px 0px 2px #71bc2b ,
             inset 11px 0px 2px #9ae75b ,
    /*--------------------------------------*/
             inset -4px 0px 1px #538127 ,
             inset -6px 0px 1px #78c32a ,
             inset -8px 0px 1px #4d7e22 ;
  border:1px solid #502946;
}
._3:after{margin-top:80px;}
._4:after{margin-top:130px;}
.cloud
{
  position:absolute;
  margin-top:243px;
  height:30px;
  width:50px;
  background:white;
  border-radius:40px 40px 0px 0px;
  z-index:2;
}
.trie
{
  position:absolute;
  margin-top:272px;
  height:30px;
  width:50px;
  background:#84e28c;
  border-radius:40px 40px 0px 0px;
  border-top:3px solid #46AA5E;
  z-index:4;
}
._c1{margin-left:0px;margin-top:267px;}
._c2{margin-left:50px;margin-top:254px;}
._c3{width:60px;height:40px;margin-top:253px;margin-left:90px;}
._c4{margin-left:200px;margin-top:263px;}
._c5{margin-left:140px;margin-top:273px;}
._c6{margin-left:170px;margin-top:253px;}
._c7{margin-left:200px;margin-top:263px;}
._c8{margin-left:-30px;margin-top:263px;}
._c10{margin-left:20px;margin-top:250px;}

._t1{margin-left:0px;width:40px;height:20px;margin-top:282px;}
._t2{margin-left:20px;width:20px;height:10px;margin-top:292px;}
._t3{margin-left:30px;width:30px;height:20px;margin-top:282px;}
._t4{margin-left:50px;width:50px;height:30px;margin-top:272px;}
._t5{margin-left:100px;width:20px;height:10px;margin-top:292px;}
._t6{margin-left:110px;width:40px;height:20px;margin-top:282px;}
._t7{margin-left:150px;width:40px;height:10px;margin-top:292px;}
._t8{margin-left:180px;width:40px;height:20px;margin-top:282px;}
._t9{margin-left:220px;width:20px;height:10px;margin-top:292px;}

.building {
  height:23px;
  width:14px;
  background:#dff0c3;
  position:absolute;
  border:2px solid #99d9e2;
  border-bottom:0px;
  margin-top:263px;
  z-index:3;
}
._b1{margin-left:130px;margin-top:270px;}
._b2{margin-left:35px;margin-top:267px;}
._b3{margin-left:20px;margin-top:269px;}
._b4{margin-left:120px;margin-top:260px;}
._b5{margin-left:80px;}
._b6{margin-left:90px;margin-top:273px;}
._b7{margin-left:30px;}
._b8{margin-left:210px;margin-top:273px;}
._b9{margin-left:200px;margin-top:266px;}
._b10{margin-left:160px;margin-top:267px;}
._b11{margin-left:170px;margin-top:277px;}
._b12{margin-left:180px;margin-top:273px;}
/*------------------flappy bird-----------------*/
.flappy_bird
{
  background:#f9f124;
  width:50px;
  height:40px;
  border:2px solid #424242;
  border-radius:40% 60%;
  box-shadow:inset 1px -15px 1px #fcbb11,
             inset 1px 3px 1px #FFF,
             -2px 1px 5px rgba(0,0,0,.2); 
  
  -webkit-transform:rotate(-10deg);
  margin:160px 40px;
}
.flappy_bird:after
{
  content:'';
  background:white;
  height:20px;
  width:20px;
  position:absolute;
  z-index:2;
  margin-left:28px;
  margin-top:5px;
  border:2px #424242 solid;
  border-radius:40% 60%;
  -webkit-transform:rotate(-10deg);
  box-shadow:inset 0px -2px 1px silver;
}
.flappy_bird:before
{
  content:'';
  background:white;
  height:25px;
  width:22px;
  position:absolute;
  z-index:2;
  margin-left:-4px;
  border:2px #424242 solid;
  border-radius:40% 70%;
  box-shadow:inset 0px -5px 1px #f9f124;
  -webkit-transform:rotate(-30deg);
}
.levre
{
  background:#fd684b;
  height:4px;
  width:23px;
  z-index:10;
  position:absolute;
  -webkit-transform:rotate(20deg);
  margin-left:25px;
  margin-top:30px;
  border:2px solid #424242;
  border-radius:20px 10px 35px 20px;
}
._l2
{
  border-radius:70px 50px 35px 20px;
}
._l1
{
  margin-top:34px;
  width:20px;
  margin-left:23px;
}
.momo
{
  width:6px;
  height:6px;
  display:block;
  position:absolute;
  background:#424242;
  border-radius:50%;
  z-index:9;
  margin-left:44px;
  margin-top:17px;
}
a{
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  margin:300px;
}

JavaScript

Flappy Bird in CSS

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

Flappy Bird in CSS

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

Share Code