Berikut kode HTML dari Game Simple PONG
<style>
#atari .screen, #atari .atari2,#atari .atari4,#atari .line,#atari .line:after,#atari .line:before {
    background: #111;
}
#atari .screen {
    height: 304px;
    position: absolute;
    width:540px;
}
#atari .resolution {
    background: none;
    margin:0;
    position: absolute;
    top:0;
}
#atari .inner-shadow {
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width: 500px;
    z-index: 100;
}
#atari .line,#atari .line:after,#atari .line:before {
    height: 1px;
    margin-bottom: 5px;
    position: relative;
    width:530px;
}
#atari .line:before,#atari .line:after {
    content:"#";
    display: block;
    margin: 0 none;
    position: absolute;
    text-indent:-9999px;
    top:2px;
    width:530px;
}
#atari .line:after {
    top:4px;
}
#atari .line:nth-child(1),#atari .line:nth-child(1):before,#atari .line:nth-child(1):after,#atari .line:nth-child(2),#atari .line:nth-child(2):before,#atari .line:nth-child(2):after,#atari .line:nth-child(50),#atari .line:nth-child(50):before,#atari .line:nth-child(50):after,#atari .line:nth-child(49),#atari .line:nth-child(49):before,#atari .line:nth-child(49):after{
    width: 500px;
}
#atari .line:nth-child(1),#atari .line:nth-child(2),#atari .line:nth-child(49),#atari .line:nth-child(50) {
    left:15px;
}
#atari .line:nth-child(1){
    background: transparent;
}
#atari .pong {
    left:20px;
    position: absolute;
    top:2px;
}
#atari .pong * {
    background: #fff;
    position: absolute;
}
@-moz-keyframes ball { 0%, 100% { left:30px; top:107px } 30% { left:300px; top:294px } 50% { left:464px; top:192px } 80% { left:198px; top:0px } }
@-moz-keyframes player1 { 0%, 90%, 100% { top:70px } 30% { top:90px } 50% { top:80px } 80% { top:60px } }
@-moz-keyframes player2 { 0%, 90%, 100% { top:180px } 30% { top:200px } 50% { top:190px } 80% { top:160px } }
@-webkit-keyframes ball { 0%, 100% { left:30px; top:107px } 30% { left:300px; top:294px } 50% { left:464px; top:192px } 80% { left:198px; top:0px } }
@-webkit-keyframes player1 { 0%, 90%, 100% { top:70px } 30% { top:90px } 50% { top:80px } 80% { top:60px } }
@-webkit-keyframes player2 { 0%, 90%, 100% { top:180px } 30% { top:200px } 50% { top:190px } 80% { top:160px } }
@keyframes ball { 0%, 100% { left:30px; top:107px } 30% { left:300px; top:294px } 50% { left:464px; top:192px } 80% { left:198px; top:0px } }
@keyframes player1 { 0%, 90%, 100% { top:70px } 30% { top:90px } 50% { top:80px } 80% { top:60px } }
@keyframes player2 { 0%, 90%, 100% { top:180px } 30% { top:200px } 50% { top:190px } 80% { top:160px } }
#atari .pong .ball {
    -moz-animation: ball 4s linear 0s infinite normal;
    -webkit-animation: ball 4s linear 0s infinite normal;
    animation: ball 4s linear 0s infinite normal;
    height: 6px;
    left:300px;
    top:294px;
    width:6px;
}
#atari .pong .player {
    height: 54px;
    width:8px;
}
#atari .pong .player1 {
    -moz-animation: player1 4s linear 0s infinite alternate;
    -webkit-animation: player1 4s linear 0s infinite alternate;
    animation: player1 4s linear 0s infinite alternate;
    left: 22px;
    top: 70px;
}

#atari .pong .player2 {
    -moz-animation: player2 4s linear 0s infinite normal;
    -webkit-animation: player2 4s linear 0s infinite normal;
    animation: player2 4s linear 0s infinite normal;
    left:470px;
    top: 180px;
}
#atari .pong .midfield {
    height: 240px;
    left: 247px;
    top:30px;
    width:6px;
}
#atari .icon {
    height: 200px;
    left:153px;
    overflow: hidden;
    position: absolute;
    top:52px;
    width:234px;
}
#atari .icon * {
    position: absolute;
}
#atari .side2 {
    left:234px;
    position: absolute;
    top:0px;
    -o-transform:scalex(-1);
    -moz-transform:scalex(-1);
    -ms-transform:scalex(-1);
    -webkit-transform:scalex(-1);
    transform:scalex(-1);
}
#atari .atari1,.atari3 {
    background: #fa000f;
}
#atari .atari1 {
    height: 200px;
    left: 85px;
    width: 32px;
}
#atari .atari2 {
    height:256px;
    top:-53px;
    width:141px}
#atari .atari2 {
    border-radius:0 0 141px 141px/256px 256px 256px 256px;
    left: -34px;
    top:-22px;
}
#atari .atari3 {
    border-radius:0 0 200px 200px/334px 334px 334px 334px;
    bottom:0;
    height: 334px;
    left:-101px;
    top:-135px;
    width:200px;
}
#atari .atari4 {
    border-radius:0 0 183px 183px/239px 239px 239px 239px;
    height:239px;
    left:-100px;
    top:-89px;
    width:183px;
}
/* general styles */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
}
.icon, .icon * {
    display: block;
    position: absolute;
}
.monitor,
.monitor .canvas {
    height: 304px;
    width:540px;
}
.monitor {
    background: #000;
    border:30px solid #000;
    border-radius:20px;
    float:left;
    position:relative;
}
.monitor:before { /* shadow */
    box-shadow: 0 360px 10px rgba(0,0,0,0.2);
    border-radius:50%;
    content: "#";
    display: block;
    height: 20px;
    left: 30px;
    position: absolute;
    text-indent: -9999px;
    width: 540px;
}
.monitor:after { /* shine */
    background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
    border-radius:20px 20px 0 0;
    height: 364px;
    content: "#";
    display: block;
    position: absolute;
    right: -30px;
    text-indent: -9999px;
    top:-30px;
    width:600px;
    z-index: 10;
}
</style>
</head>
<body>
    <div id="atari">
        <div class="monitor">
            <div class="canvas">
                <div class="screen">
                    <div class="icon">
                        <div class="side1 side">
                            <div class="atari1"></div>
                            <div class="atari2"></div>
                            <div class="atari3"></div>
                            <div class="atari4"></div>
                        </div>
                        <div class="side2 side">
                            <div class="atari1"></div>
                            <div class="atari2"></div>
                            <div class="atari3"></div>
                            <div class="atari4"></div>
                        </div>
                    </div>
                    <div class="pong">
                        <div class="score1 score"></div>
                        <div class="score2 score"></div>
                        <div class="player1 player"></div>
                        <div class="player2 player"></div>
                        <div class="ball"></div>
                    </div>
                    <div class="resolution canvas">
                        <div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div> <div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div>
                    </div>
                    <div class="shadow"></div>
                </div>
            </div>
        </div>
    </div>
Berikut Contohnya.

13 comments

28 Desember 2011 17.34

wahhhh mantaaaappp sob.... di coba apa kagak ya....
heheh

pertamax kan ini.....

28 Desember 2011 17.49

Keren banget gamenya sob, baru pertama aku temukan game dari CSS

28 Desember 2011 17.57

mana ah kagak bisa dimainin gan -__-

28 Desember 2011 18.01

mantep gan,, bisa dimainin gak tuh?

28 Desember 2011 18.01

@ Ф дфѕдғфдғ Ф : memang kagak bisa dimainin gan...
itu cuma contoh aja

28 Desember 2011 18.29

Keren dach... :D
Tapi ini bukan lebih menjurus ke video... hehe... tetep keren..

BTW kalau di Google Chrome kog ga' muncul ya...

28 Desember 2011 18.33

@ Pradika Abdi : kagak bisa [cuma contoh saja]
@ Prozonas : GC.nya ga dukung blog saya

28 Desember 2011 22.36

bikin berat blog ga tuh kalo di pasang?

28 Desember 2011 22.41

@ Indra antara : kagak kok...
tadi ane pasang biasa saja .. ga ada yg beratkan

28 Desember 2011 22.45

jadi penasaran,di coba yahh gan ^^

28 Desember 2011 23.24

CSS codenya rumit, tapi copy aja kalau mau coba... hehe..

29 Desember 2011 00.08

Hmmm.... udah pernah liat kayanya hehe.... :D

29 Desember 2011 07.16

Kok nggak bisa dimainin ya. hehehe..

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar