Loker dan Kuliah

Kumpulan Informasi Loker dan Kuliah di Indonesia

Sunday, July 26, 2015

Web Game : User Interface

10:59:00 PM Posted by Abdul Rohman 3 comments
Dalam pembuatan Game, User Interface merupakan pembahasan paling penting terutama menggunakan CSS pada game HTML 5. Sebagai contoh dengan pemanfaatan tag button yang diberikan manipulasi warna,  teks, link dan lain-lain. Dibawah ini contoh interface dengan menggunakan button, hover, gameUI dan game Intro, yang masing-masing mempunyai atribut untuk mendesain objeknya seperti; font, border, margin, padding, color, height dan width.

Contoh:
<html>
    <head>
<style>
#gameUI {
height: 600px;
position: absolute;
width: 800px;
}
#gameIntro, #gameComplete {
background: rgba(0, 0, 0, 0.5);
margin-top: 100px;
padding: 40px 0;
text-align: center;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.button {
background: #185da8;
border-radius: 5px;
display: block;
font-size: 30px;
margin: 40px 0 0 270px;
padding: 10px;
width: 200px;
}
a.button:hover {
background: #2488f5;
color: #fff;
text-decoration: none;
}
</style>
    </head>
    <body>
<div id="gameUI">
<div id="gameIntro">
<h1>Game Online</h1>
<p>Click play untuk mulai.</p>
<p><a id="gamePlay" class="button" href="">Play</a></p>
</div>
</div>
    </body>
</html>

Hasilnya:
.


3 comments: