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