Ajax Loader
×

Windows 8 Metro Tiles With CSS3

This creation of mine is totally inspired by Windows 8 tiles....hope you'll like it...

Original And Download Link: http://css-box.blogspot.com/2012/12/windows-8-metro-tiles-with-css3.html

HTML 
<span class="start">Start</span>
1
<span class="start">Start</span>
2
 
3
<div class="metro-surface">
4
 <table>
5
  <tr>
6
   <td><div class="metro-tile metro-tile-small metro-tile-store">Store</div></td>
7
   <td><div class="metro-tile metro-tile-small metro-tile-xbox">Xbox LIVE Games</div></td>
8
   <td><div class="metro-tile metro-tile-google">Google</div></td>
9
   <td><div class="metro-tile metro-tile-angrybirds">Angry Birds</div></td>
10
  </tr>
11
  </table>
12
  <table>
13
  <tr>
14
   <td><div class="metro-tile metro-tile-small metro-tile-music">Music</div></td>
15
   <td><div class="metro-tile metro-tile-small metro-tile-ie">Internet</div></td>
16
   <td><div class="metro-tile metro-tile-image">Images</div></td>
17
   <td><div class="metro-tile metro-tile-tweet">Tweet</div></td>
18
  </tr>
19
  </table>
20
  <table>
21
  <tr>
22
   <td><div class="metro-tile metro-tile-msg">Messaging</div></td>
23
   <td><div class="metro-tile metro-tile-player">Player</div>
24
   <td><div class="metro-tile metro-tile-small metro-tile-facebook">Facebook</div></td>
25
   <td><div class="metro-tile metro-tile-small metro-tile-twitter">Twitter</div></td>
26
  </tr>
27
 </table>
28
  <table>
29
  <tr>
30
   <td><div class="metro-tile metro-tile-aciii">Assassins Creed III</div></td>
31
   <td><div class="metro-tile metro-tile-gmail">Gmail</div>
32
   <td><div class="metro-tile metro-tile-small metro-tile-dropbox">Dropbox</div></td>
33
   <td><div class="metro-tile metro-tile-small metro-tile-blogger">Blogger</div></td>
34
  </tr>
35
 </table>
36
</div>
 
CSS 
/*----------------------------------------------------
1
/*----------------------------------------------------
2
Created by Hardeep Asrani
3
Don't remove credits and you're free to use this
4
Blog - hardeepasrani.blogspot.com
5
Download This At - css-box.blogspot.com
6
----------------------------------------------------*/
7
body {
8
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Background.jpg) bottom no-repeat;
9
  background-color:58169a;
10
}
11
 
12
 
13
span.start {
14
  color:white;
15
  font-size:2em;
16
 
17
}
18
 
19
.credits {
20
  color:white;
21
  text-align:right;
22
  text-decoration:none;
23
  font-weight: bold;
24
}
25
 
26
 
27
.metro-surface{
28
  padding: 40px 0px 0px 0px;
29
}
30
 
31
 
32
.metro-tile {
33
  background-color: #D8512B;
34
  border-color: #DC6241;
35
  width: 232px;
36
  height: 104px;
37
  padding: 5px;
38
  color: #FFF;
39
  font-family: sans-serif;
40
  font-size: 12px;
41
  border-width: 3px;
42
  border-style: solid;
43
  cursor: default;
44
  -webkit-transition: 0.1s all;
45
  -moz-transition: 0.1s all;
46
  -ms-transition: 0.1s all;
47
  transition: 0.1s all;
48
}
49
 
50
 
51
.metro-tile-small {
52
  width: 104px;
53
  height: 104px;
54
}
55
 
56
 
57
.metro-tile-store {
58
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Store.png);
59
  background-color: #2878EC;
60
  border-color: #2878EC;
61
}
62
 
63
 
64
.metro-tile-xbox {
65
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/XBox.png);
66
  background-position: 8px 8px;
67
        background-color:#6CB71E;
68
        border-color:#6CB71E;
69
}
70
 
71
 
72
.metro-tile-google {
73
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Google.png);
74
  background-color: #009719;
75
  border-color: #009719;
76
}
77
 
78
 
79
.metro-tile-angrybirds {
80
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/AngryBirds.jpg);
81
        border-image: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/AngryBirds.jpg) 1;
82
}
83
 
84
 
85
.metro-tile-music {
86
  background: url('https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Music.png');
87
        background-color: #D8512B;
88
  border-color: #D8512B;
89
}
90
 
91
 
92
.metro-tile-ie {
93
  background: url('https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/IE.png');
94
        background-color: #2878EC;
95
  border-color: #2878EC;
96
}
97
 
98
 
99
.metro-tile-image {
100
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Image.jpg);
101
  border-color: black;
102
}
103
 
104
 
105
.metro-tile-tweet {
106
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Tweet.png);
107
  background-color: #2878EC;
108
  border-color: #2878EC;
109
}
110
 
111
 
112
.metro-tile-msg {
113
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Messaging.png);
114
  background-color: #2878EC;
115
  border-color: #2878EC;
116
}
117
 
118
 
119
.metro-tile-player {
120
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Gangnam.jpg);
121
  border-color: black;
122
}
123
 
124
 
125
.metro-tile-facebook {
126
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Facebook.png);
127
  background-color: #3B5998;
128
  border-color: #3B5998;
129
}
130
 
131
 
132
.metro-tile-twitter {
133
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Twitter.png);
134
  background-color: #2878EC;
135
  background-position: 0 10px;
136
  border-color: #2878EC;
137
}
138
 
139
 
140
.metro-tile-aciii {
141
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/AC3.jpg);
142
  border-color: black;
143
}
144
 
145
 
146
.metro-tile-gmail {
147
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Gmail.png);
148
  background-color: #009719;
149
  border-color: #009719;
150
}
151
 
152
 
153
.metro-tile-dropbox {
154
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Dropbox.png);
155
  background-color: #2878EC;
156
  border-color: #2878EC;
157
}
158
 
159
 
160
.metro-tile-blogger {
161
  background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Blogger.png);
162
  background-color: #D8512B;
163
  border-color: #D8512B;
164
}
165
 
166
 
167
div.metro-tile:hover {
168
  -webkit-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
169
  -moz-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
170
  -ms-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
171
  transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
172
  border-width: 3px;
173
  border-style:solid;
174
}
 

Windows 8 Metro Tiles With CSS3

CSSDeck G+