Ajax Loader
×
HTML 
<h2>Dont forget to check :active</h2>
1
<h2>Dont forget to check :active</h2>
2
3
<ul class="metro">
4
5
  <li><i class="fa fa-gamepad"></i><span>Games</span></li>
6
  <li><i class="fa fa-cogs"></i><span>Settings</span></li>
7
  <li><i class="fa fa-envelope-o"></i><span>Email</span></li>
8
  <li><i class="fa fa-comments-o"></i><span>Messages</span></li>
9
  <li><i class="fa fa-music"></i><span>Music</span></li>
10
  <li><i class="fa fa-heart-o"></i><span>Favorites</span></li>
11
  <li><i class="fa fa-picture-o"></i><span>Photos</span></li>
12
  <li><i class="fa fa-picture-o"></i><span>bla</span></li>
13
14
</ul>
15
 
16
<div class="box">
17
  <span class="close"></span>
18
  <p></p>
19
</div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
1
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
2
@import "http://fontawesome.io/assets/font-awesome/css/font-awesome.css";
3
 
4
body {
5
    background: #363B48;
6
    font-family: Montserrat;
7
    overflow:hidden;
8
    -webkit-touch-callout: none;
9
    -webkit-user-select: none;
10
    -khtml-user-select: none;
11
    -moz-user-select: none;
12
    -ms-user-select: none;
13
    user-select: none;
14
}
15
 
16
h2 {
17
  margin:150px auto 50px;
18
  text-align:center;
19
  font-size:18px;
20
  text-transform:uppercase;
21
  background:#2e333f;
22
  padding:25px;
23
  display:block;
24
  cursor:default;
25
  width:370px;
26
  color:#cacaca;
27
  border:1px solid rgba(173, 173, 173, 0.15);
28
}
29
 
30
.metro {
31
    width: 630px;
32
    margin: 0 auto 0;
33
}
34
 
35
 
36
.metro li {
37
    -webkit-transform: perspective(600px);
38
    -webkit-transform-style: preserve-3d;
39
    -webkit-transform-origin-x: 50%;
40
    -webkit-transform-origin-y: 50%;
41
    -ms-transform: perspective(600px);
42
    -ms-transform-style: preserve-3d;
43
    -ms-transform-origin-x: 50%;
44
    -ms-transform-origin-y: 50%;
45
    transform: perspective(600px);
46
    transform-style: preserve-3d;
47
    transform-origin-x: 50%;
48
    transform-origin-y: 50%;
49
    cursor: default;
50
    position: relative;
51
    text-align: center;
52
    margin: 0 10px 10px 0;
53
    width: 150px;
54
    height: 150px;
55
    color: #ffffff;
56
    float: left;
57
    -webkit-transition: .2s -webkit-transform, 1s opacity;
58
    -ms-transition: .2s -ms-transform, 1s opacity;
59
    transition: .2s transform, 1s opacity;
60
    cursor:pointer;
61
}
62
 
63
.metro li i {
64
    font-size: 54px;
65
    margin: 35px 0 0;
66
}
67
 
68
.metro li span {
69
    color: rgba(255, 255, 255, 0.8);
70
    text-transform: uppercase;
71
    position: absolute;
72
    left: 15px;
73
    bottom: 15px;
74
    font-size: 14px;
75
}
76
 
77
.metro li:first-child {
78
    background: #00b6de;
79
}
80
 
81
.metro li:nth-child(2) {
82
    background: #56dea7;
83
    width: 310px;
84
}
85
 
86
.metro li:nth-child(3) {
87
    background: #ff7659;
88
    margin: 0;
89
}
90
 
91
.metro li:nth-child(4) {
92
    background: #f8cd36;
93
}
94
 
95
.metro li:nth-child(5) {
96
    background: #f26175;
97
}
98
 
99
.metro li:nth-child(6) {
100
    background: #5ca7df;
101
}
102
 
103
.metro li:last-child {
104
    background: #9e7ac2;
105
    margin: 0;
106
}
107
 
108
.metro li:nth-child(5):active, .metro li:first-child:active {
109
    -webkit-transform: scale(0.95);
110
    -ms-transform: scale(0.95);
111
    transform: scale(0.95);
112
}
113
 
114
.metro li:nth-child(7):active, .metro li:nth-child(2):active {
115
    -webkit-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
116
    -ms-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
117
    transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
118
}
119
 
120
.metro li:nth-child(3):active {
121
    -webkit-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
122
    -ms-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
123
    transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
124
}
125
 
126
.metro li:nth-child(4):active {
127
    -webkit-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
128
    -ms-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
129
    transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
130
}
131
 
132
.metro li:nth-child(6):active {
133
    -webkit-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
134
    -ms-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
135
    transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
136
}
137
 
138
/* POPUP */
139
 
140
.box {
141
    display: table;
142
    top: 0;
143
    visibility: hidden;
144
    -webkit-transform: perspective(1200px) rotateY(180deg) scale(0.1);
145
    -ms-transform: perspective(1200px) rotateY(180deg) scale(0.1);
146
    transform: perspective(1200px) rotateY(180deg) scale(0.1);
147
    top: 0;
148
    left: 0;
149
    z-index: -1;
150
    position: absolute;
151
    width: 100%;
152
    height: 100%;
153
    opacity: 0;
154
    transition: 1s all;
155
}
156
 
157
.box p {
158
    display: table-cell;
159
    vertical-align: middle;
160
    font-size: 64px;
161
    color: #ffffff;
162
    text-align: center;
163
    margin: 0;
164
    opacity: 0;
165
    transition: .2s;
166
    -webkit-transition-delay: 0.2s;
167
    -ms-transition-delay: 0.2s;
168
    transition-delay: 0.2s;
169
}
170
 
171
.box p i {
172
    font-size: 128px;
173
    margin:0 0 20px;
174
    display:block;
175
}
176
 
177
.box .close {
178
  display:block;
179
  cursor:pointer;
180
  border:3px solid rgba(255, 255, 255, 1);
181
  border-radius:50%;
182
  position:absolute;
183
  top:50px;
184
  right:50px;
185
  width:50px;
186
  height:50px;
187
  -webkit-transform:rotate(45deg);
188
  -ms-transform:rotate(45deg)
189
  transform:rotate(45deg);
190
  transition: .2s;
191
  -webkit-transition-delay: 0.2s;
192
  -ms-transition-delay: 0.2s;
193
  transition-delay: 0.2s;
194
  opacity:0;
195
}
196
 
197
.box .close:active {
198
    top:51px;
199
}
200
 
201
.box .close::before {
202
  content: "";
203
  display: block;
204
  position: absolute;
205
  background-color: rgba(255, 255, 255, 1);
206
  width: 80%;
207
  height: 6%;
208
  left: 10%;
209
  top: 47%;
210
}
211
 
212
.box .close::after {
213
  content: "";
214
  display: block;
215
  position: absolute;
216
  background-color: rgba(255, 255, 255, 1);
217
  width: 6%;
218
  height: 80%;
219
  left: 47%;
220
  top: 10%;
221
}
222
 
223
.box.open {
224
    left: 0;
225
    top: 0;
226
    visibility: visible;
227
    opacity: 1;
228
    z-index: 999;
229
    -webkit-transform: perspective(1200px) rotateY(0deg) scale(1);
230
    -ms-transform: perspective(1200px) rotateY(0deg) scale(1);
231
    transform: perspective(1200px) rotateY(0deg) scale(1);
232
    width: 100%;
233
    height: 100%;
234
}
235
 
236
.box.open .close, .box.open p {
237
    opacity: 1;
238
}
 
JavaScript 
$(document).ready(function() {
1
$(document).ready(function() {
2
 
3
  var $box = $('.box');
4
 
5
  $('.metro li').each(function(){
6
    var color = $(this).css('backgroundColor');
7
    var content = $(this).html();
8
    $(this).click(function() {
9
    $box.css('backgroundColor', color);
10
    $box.addClass('open');
11
    $box.find('p').html(content);
12
  });
13
  
14
  $('.close').click(function() {
15
    $box.removeClass('open');
16
    $box.css('backgroundColor', 'transparent');
17
  });
18
  
19
 });
20
21
});
 

Untitled

CSSDeck G+