Skip to content

Instantly share code, notes, and snippets.

@incompl

incompl/gist:4088514

Created November 16, 2012 16:05
Show Gist options
  • Save incompl/4088514 to your computer and use it in GitHub Desktop.
Save incompl/4088514 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<!--
DOM sprite demo
by Christer Kaitila
http://mcfunkypants.com
http://twitter.com/McFunkypants
http://google.com/+ChristerKaitila
Created for Build New Games (c) 2012 by Bocoup
http://www.buildnewgames.com
Permission is granted to use this source code
in any way you wish, commercial or otherwise. Enjoy!
-->
<html lang="en">
<head>
<title>DOM sprite demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
body { margin:0; padding:0; border:0; background:black; overflow:hidden; }
div { position:absolute; margin:0; padding:0; border:0; outline:0;
font-family:arial; font-size:12px; color:white; text-align:center; }
#header { width:100%; top:24px; left:0px; }
#header a { color:white; }
#stats { width:100%; bottom:24px; left:0px; }
#playbutton { position:absolute; top:50%; left:50%; margin-left:-137px;
margin-top:-25px; width:256px; height:32px; padding:16px; border-radius:16px;
border:2px solid black; background:#666666; color:white;
text-decoration:none; display:block; font-size:32px; line-height:32px;
font-family:arial; font-weight:bold; text-align:center; }
#playbutton:hover { background:red; }
#viewport { width:640px; height:480px; overflow:hidden;
top:50%; left:50%; margin-left:-320px; margin-top:-240px; }
#level { width:2048px; height:100%; top:0px; left:0px; }
#background { width:100%; height:100%; top:0px; left:0px;
background:url(bgtile.jpg); }
.sprite { background-image:url(spritesheet.png); width:32px; height:32px; }
</style>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment