Sunday, July 26, 2015

Web Game : User Interface

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:
.


0 komentar:

Post a Comment

 
Copyright © . Grup Kuliah - Posts · Comments
Powered by Blogger
close
==[ Klik disini 1X ] [ Close ]==