Skip to content

Instantly share code, notes, and snippets.

@VoQn

VoQn/metallookui.html

Created May 26, 2010 13:45
Show Gist options
  • Save VoQn/414498 to your computer and use it in GitHub Desktop.
Save VoQn/414498 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
metallookui.html
<?xml version="1.0" encosing="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitinal.dtd">
<html xmlnx="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Hoge</title>
</head>
<body>
<!--Contents-->
<div class="page">
<div class="contents">
<header>
<h1 class="title">I &hearts; Internet</h1>
<time id="justnow"></time>
</header>
<nav>
<ul class="navi">
<li class="pageTop"><a href="http://www.google.com/profiles/VoQn.tyrantist">Profile</a></li>
<li class="pagePrev"><a href="http://voqn.blogspot.com/">Blog</a></li>
<li class="pageNext"><a href="http://twitter.com/VoQn">Twitter</a></li>
<li class="siteIndex"><a href="http://b.hatena.ne.jp/VoQn/">Bookmark</a></li>
</ul>
</nav>
</div>
</div>
<!--CSS-->
<style type="text/css"><!--
body{
background: #666;
margin: 0;
padding: 0;
border: 0;
color: #666;
font-family: sans-serif;
}
.page{
width: 320px;
margin: 0 auto;
margin-top: 10px;
padding: 2px;
background: #999; /* for not supported gradient */
background: -moz-linear-gradient(top, #eee, #111 60%, #999); /* firefox */
background: -webkit-gradient(linear, center top, center bottom,
from(#eee), color-stop(0.6, #111), to(#999)); /* webkit */
border-radius: 22px;
-moz-border-radius: 22px; /* firfox */
-webkit-border-radius: 22px; /* safari */
border: 1px solid #000;
/* drop shadow */
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8); /* opera */
-moz-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8); /* firefox */
-webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8); /* webkit */
}
.contents{
background: #aaa; /* for not supported gradient */
background: -moz-linear-gradient(top, #ccc, #333); /* firefox */
background: -webkit-gradient(linear, center top, center bottom,
from(#ccc),to(#333)); /* webkit */
border-radius: 20px;
-moz-border-radius: 20px; /* firfox */
-webkit-border-radius: 20px; /* Safari */
}
.title{
margin: 0;
text-align: center;
text-shadow: 0px -2px 0px rgba(0, 0, 0, 0.8), /* shadow */
0px 2px 0px rgba(255, 255, 255, 0.8); /* highlight */
}
#justnow{
display: block;
margin: 5px 30px 20px 30px;
padding: 5px;
background: #000;
color: #0c0;
text-align: center;
border-radius: 10px;
-moz-border-radius: 10px; /* firfox */
-webkit-border-radius: 10px; /* Safari */
border: 2px solid #777;
/* represent high-right looks like glass */
box-shadow: inset 0px 0px 50px rgba(0, 255, 150, 0.5),
inset 0 1px rgba(255, 255, 255, 0.3),
inset 0 20px rgba(255, 255, 255, 0.2);
/* firefox */
-moz-box-shadow: inset 0px 0px 50px rgba(0, 255, 150, 0.5),
inset 0 1px rgba(255, 255, 255, 0.3),
inset 0 20px rgba(255, 255, 255, 0.2);
/* webkit */
-webkit-box-shadow: inset 0px 0px 50px rgba(0, 255, 150, 0.5),
inset 0 1px rgba(255, 255, 255, 0.3),
inset 0 20px rgba(255, 255, 255, 0.5);
}
/* display as block */
header, footer, nav, article {
display: block;
}
.navi{
display: -webkit-box;
-webkit-box-sizing: content-box;
margin: 0;
-webkit-padding-start: 30px;
padding: 5 auto;
padding-top: 5px;
padding-bottom: 5px;
background: #999; /* for not supported gradient */
background: -moz-linear-gradient(top, #ccc, #555); /* firefox */
background: -webkit-gradient(linear, center top, center bottom,
from(#ccc), to(#555)); /* webkit */
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
border-top: 1px solid #333;
}
/* display as inline */
.pageTop, .pagePrev, .pageNext, .siteIndex {
display: inline;
display: -moz-box;
text-align: center;
}
.navi a{
-moz-box-sizing: content-box;
padding: 5px;
margin: 2px;
font-size: 10pt;
color: #222;
text-decoration: none;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.navi a:hover{
background: #555;
background: -moz-linear-gradient(top, #777, #333);
background: -webkit-gradient(linear, center top, center bottom, from(#777),to(#333));
color: #fff;
text-shadow: 0px 0px 5px #fff;
box-shadow: 0 0 3px #fff;
-moz-box-shadow: 0 0 3px #fff;
-webkit-box-shadow: 0 0 3px #fff;
border: 1px solid #fff;
}
--></style>
<!--Javascript-->
<script type="text/javascript">
<!--
function disp(){
var now = (new Date()).toString();
document.getElementById('justnow').innerHTML = now;
setTimeout("disp()", 1000);
};
window.onload = function(){ disp(); };
-->
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment