-
Notifications
You must be signed in to change notification settings - Fork 59
/
index.html
117 lines (82 loc) · 4.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<!-- META -->
<title> Javascript + HTML + CSS3: Windows Metro Tiles </title>
<meta name="author" content="Tim Holman">
<meta name="description" content="Javascript + HTML + CSS3: Windows Metro Tiles">
<!-- CSS (not required to use tile-js, just used in my demo ) -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,900" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JS -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22825241-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- MISC -->
</head>
<body>
<a href="https://github.com/tholman/tilejs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<a class="back-link" href="http://tholman.com" style=""> ← </a>
<div id="container">
<div id="contents">
<div id="post">
<header>
<h1> Windows Metro tiles with Javascript and CSS3 </h1>
</header>
<!-- Info about metro tiles -->
<p>
<b> What: </b> TileJs brings the (lovable?) subtle effects of windows 8 tiles to the web, with css3 and a touch of javascript.
What are these subtle effects, I hear you ask? Well, more or less its just a slight tilting of the metro tiles when you click, leaning towards the edge closest to your cursor (or finger!) or, if you click in the center, the slight depression of the tile into the screen.
</p>
<p>
<b> Why: </b> Because these subtle effects are what make websites great!... perhaps most people won't notice them, but some will... and it will make them smile :)
</p>
<p> <b> Demo: </b> Just click the tiles, and see that sleek tilting action!</p>
<div id="metro-array" style="display: inline-block;">
<!-- Simple grid for the demo! None of these styles are required, thats just how I've styled my tiles -->
<!-- The only important thing is class="metro-tile" -->
<div style="width: 230px; height: 230px; float: left; ">
<a class="metro-tile" style="cursor: pointer; width: 230px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff; margin-bottom: 10px;">
You can
</a>
<a class="metro-tile" style="cursor: pointer; width: 230px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff;">
put
</a>
</div>
<div style="width: 230px; height: 230px; float: left; margin-left: 10px">
<a class="metro-tile" style="cursor: pointer; width: 230px; height: 230px; display: block; background-color: deepSkyBlue; color: #fff">
anything you want
</a>
</div>
<div style="width: 230px; height: 230px; float: left; margin-left: 10px">
<a class="metro-tile" style="cursor: pointer; width: 230px; height: 110px; display: block; background-color: deepSkyBlue; color: #fff; margin-bottom: 10px;">
in
</a>
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin-right: 10px; display: block; float: left; background-color: deepSkyBlue; color: #fff;">
these
</a>
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; display: block; background-color: deepSkyBlue; float: right; color: #fff;">
tiles
</a>
</div>
</div>
<p>
<b> How: </b> Using tileJs is easy! The code is open source on <a href="http://github.com/tholman/tileJs"> github </a>, so you can easily download the tileJs script (or the minified version) and get started! All you need to do is add <i style="font-weight: normal;">"metro-tile"</i> to the class of you tile-to-be elements, and include the script at the bottom of the page! There's no jquery, or css required either!! There's a more detailed, step by step guide on github: <a href="http://github.com/tholman/tileJs"> here </a>
</p>
<p>
<b> Who: </b> You! No... ME! I'm Tim, an Australian interactive developer, living busy New York. I love to tinker and play with Javascript, css and any new technology. You can see my <a href="http://tholman.com"> experiments </a>, <a href="http://tholman.com/blog"> blog </a> or reach out to me on twitter: <a href="http://twitter.com/twholman"> @twholman </a>
</p>
</div>
</div>
</div>
<!-- Including TileJs... YAY! -->
<script src="js/tileJs.js" type="text/javascript"></script>
</body>
</html>