Ajax Loader
HTML
<div class="background">
1
<div class="background">
2
  <div id="card">
3
          <input type="checkbox" name="dropshots" id="dropshots" >
4
    <div class="member-infos">
5
      <h1><a href="http://dribbble.com/One_div" class="member-name" target="_blank">One div</a></h1>
6
      <h2 class="member-location"><a href="" class="entypo-location" target="_blank">Nantes, France</a></h2>
7
      <div class="member-parameters">
8
        <a href="" class="follow entypo-plus"></a>
9
        <a href="" class="options entypo-cog"></a>
10
         <ul class="member-socials">
11
         <li class="member-shots-number"><a href="http://dribbble.com/One_div">3 <span class="shots-number">shots</span></a></li>        
12
        <li class="member-follower"><a href="http://dribbble.com/One_div/followers">12 <span class="followers">followers</span></a></li>  
13
      </ul>
14
      </div>
15
      <ul class="member-contact">
16
        <li class="member-website" ><a class="entypo-globe"  target="_blank" href="http://one-div.com" ></a></li>
17
        <li class="member-twitter" ><a class="entypo-twitter" target="_blank"  href="https://twitter.com/One_div" ></a></li>
18
        <li class="member-hire"><a class="entypo-mail" target="_blank"  href="http://dribbble.com/One_div" ></a></li>
19
      </ul>
20
 
21
      <div class="member-photo">
22
          <div for="dropshots" class="wrapper-img">
23
        <img src="http://dribbble.s3.amazonaws.com/users/242529/avatars/small/273b902fd1562700d99b15f3c00d600d.png?1353934890" alt="" />   
24
            </div>
25
                  <label for="dropshots" class="labelimg entypo-picture">
26
                    
27
        </label>
28
      </div>     
29
    </div>
30
         
31
    <div class="member-shots">
32
<input type="radio" name="next" id="next1" checked >
33
<label for="next1" class="next entypo-loop" ></label>
34
<input type="radio" name="next" id="next2">
35
<label for="next2" class="next entypo-loop"></label>
36
  <input type="radio" name="next" id="next3">
37
<label for="next3" class="next entypo-loop"></label>
38
      <ul>
39
        <li class="shot s1">
40
          <div class="shot-stats"><span class="shot-views entypo-eye">225</span><a href=""><span class="shot-comments entypo-comment">4</span></a><a href=""><span class="shot-like entypo-heart">35</span></a></div>
41
  <a href="http://dribbble.com/shots/1075243-CSSNES?list=users" target="_blank" >        <img src="http://dribbble.s3.amazonaws.com/users/242529/screenshots/1075243/cssnes.png" alt="" class="shot-preview" />  </a>
42
        </li>
43
                <li class="shot s2">
44
          <div class="shot-stats"><span class="shot-views entypo-eye">225</span><a href=""><span class="shot-comments entypo-comment">4</span></a><a href=""><span class="shot-like entypo-heart">35</span></a></div>
45
                  <a href="http://dribbble.com/shots/1075219-Thank-You-jayemsee" target="_blank" >
46
          <img src="http://dribbble.s3.amazonaws.com/users/242529/screenshots/1075219/thank-you.png" alt="" class="shot-preview" />  
47
                    </a>
48
        </li>
49
         <li class="shot s3">
50
          <div class="shot-stats"><span class="shot-views entypo-eye">1</span><a href=""><span class="shot-comments entypo-comment">0</span></a><a href=""><span class="shot-like entypo-heart">0</span></a></div>
51
                  <a href="http://dribbble.com/shots/1083632-Dribbble-Member-Card-Concept" target="_blank" >
52
          <img src="http://dribbble.s3.amazonaws.com/users/242529/screenshots/1083632/dribbble_member_card.png" alt="" class="shot-preview" />  
53
                    </a>
54
        </li>
55
        </ul>  
56
      </div>
57
    </div>
58
  </div>
 
CSS
@import url(http://fonts.googleapis.com/css?family=Raleway);
1
@import url(http://fonts.googleapis.com/css?family=Raleway);
2
@import url(http://weloveiconfonts.com/api/?family=entypo);
3
html, body, div, span, applet, object, iframe,
4
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5
a, abbr, acronym, address, big, cite, code,
6
del, dfn, em, img, ins, kbd, q, s, samp,
7
small, strike, strong, sub, sup, tt, var,
8
b, u, i, center,
9
dl, dt, dd, ol, ul, li,
10
fieldset, form, label, legend,
11
table, caption, tbody, tfoot, thead, tr, th, td,
12
article, aside, canvas, details, embed, 
13
figure, figcaption, footer, header, hgroup, 
14
menu, nav, output, ruby, section, summary,
15
time, mark, audio, video {
16
  margin: 0;
17
  padding: 0;
18
  border: 0;
19
  font-size: 100%;
20
  font: inherit;
21
  vertical-align: baseline;
22
}
23
/* HTML5 display-role reset for older browsers */
24
article, aside, details, figcaption, figure, 
25
footer, header, hgroup, menu, nav, section {
26
  display: block;
27
}
28
body {
29
  line-height: 1;
30
}
31
ol, ul {
32
  list-style: none;
33
}
34
blockquote, q {
35
  quotes: none;
36
}
37
blockquote:before, blockquote:after,
38
q:before, q:after {
39
  content: '';
40
  content: none;
41
}
42
table {
43
  border-collapse: collapse;
44
  border-spacing: 0;
45
}
46
html,body,.background {
47
  height: 100%;
48
  width: 100%;
49
  font-family: 'Raleway', sans-serif;
50
  color: #999;
51
}
52
 
53
a {
54
  text-decoration: none;
55
  color: #999;
56
}
57
 
58
[class*="entypo-"]:before {
59
  font-family: 'entypo', sans-serif;
60
}
61
 
62
[class*="entypo-"] {
63
  width: 1em;
64
  height: 1em;
65
}
66
 
67
a:hover {
68
  color: #777;
69
}
70
 
71
.background {
72
  background: url('http://one-div.com/codepen/bg.jpg') no-repeat;
73
 
74
  -webkit-background-size: cover;
75
  -moz-background-size: cover;
76
  background-size: cover;
77
  text-align: center;
78
}
79
 
80
.background:before {
81
  content: "";
82
  height: 100%;
83
  display: inline-block;
84
  vertical-align: middle;
85
}
86
 
87
#card {
88
  width: 300px;
89
  display: inline-block;
90
  vertical-align: middle;
91
  background: #F0F0F0;
92
  border-radius: 3px 3px 4px 4px;
93
 
94
  -webkit-box-sizing: border-box;
95
  -moz-box-sizing: border-box;
96
  -ms-box-sizing: border-box;
97
  box-sizing: border-box;
98
  border-top: 1px solid white;
99
 
100
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
101
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
102
}
103
 
104
.member-infos {
105
  padding: 10px;
106
  text-align: left;
107
  position: relative;
108
}
109
 
110
h1 {
111
  margin-bottom: 0.5em;
112
}
113
 
114
h1 a {
115
  color: #4083A9;
116
  font-weight: bold;
117
  font-size: 1.4em;
118
}
119
 
120
h1 a:hover {
121
  color: #205F82;
122
}
123
 
124
.member-location a:before {
125
  margin-right: 5px;
126
}
127
 
128
.member-location {
129
  text-indent: 2px;
130
}
131
 
132
.follow,.options {
133
  width: 30px;
134
  height: 30px;
135
  text-align: center;
136
  line-height: 30px;
137
  background: #D3D3D3;
138
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
139
 
140
  -webkit-box-shadow: 0 2px 0 0 #C0C0C0;
141
  box-shadow: 0 2px 0 0 #C0C0C0;
142
  border-radius: 3px;
143
}
144
 
145
.follow:hover,.options:hover {
146
  -webkit-box-shadow: 0 1px 0 0 #C0C0C0;
147
  box-shadow: 0 1px 0 0 #C0C0C0;
148
 
149
  -webkit-box-sizing: border-box;
150
  -moz-box-sizing: border-box;
151
  -ms-box-sizing: border-box;
152
  box-sizing: border-box;
153
  vertical-align: bottom;
154
  margin-bottom: -1px;
155
}
156
 
157
.member-parameters a {
158
  display: inline-block;
159
}
160
 
161
.member-parameters {
162
  margin-top: 0.5em;
163
}
164
 
165
.member-photo {
166
  position: absolute;
167
  border-radius: 50%;
168
  overflow: hidden;
169
  right: 10px;
170
  bottom: -40px;
171
  z-index: 3;
172
  width: 80px;
173
  height: 80px;
174
}
175
 
176
.member-photo img {
177
  display: block;
178
  font-weight: bold;
179
  border-radius: 50%;
180
}
181
 
182
.member-socials {
183
  display: inline-block;
184
  font-weight: bold;
185
  vertical-align: bottom;
186
  line-height: 8px;
187
}
188
 
189
.member-socials li {
190
  display: inline-block;
191
}
192
 
193
.shots-number,.followers {
194
  font-weight: normal;
195
  display: block;
196
  margin-top: 10px;
197
  font-size: 0.9em;
198
}
199
 
200
.member-contact {
201
  position: absolute;
202
  right: 10px;
203
  top: 10px;
204
}
205
 
206
.member-contact li {
207
  display: inline-block;
208
  margin-left: 10px;
209
}
210
 
211
.member-shots {
212
  height: 0px;
213
  overflow: hidden;
214
  border-radius: 0 0px 3px 3px;
215
  position: relative;
216
 
217
  -webkit-transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
218
  -moz-transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
219
  -o-transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
220
  -ms-transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
221
  transition: all 1000ms cubic-bezier(.45,.17,.39,1.39);
222
}
223
 
224
.shot-comments {
225
  margin: 0 15px;
226
}
227
 
228
.shot-stats a:hover span {
229
  color: #4083A9;
230
}
231
 
232
.member-shots:before {
233
  content: "";
234
  position: absolute;
235
  width: 100%;
236
  height: 16%;
237
 
238
  background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
239
  background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
240
  background: -o-linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
241
  background: -ms-linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
242
  background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%);
243
  left: 0;
244
  top: 0;
245
  z-index: 2;
246
}
247
 
248
input {
249
  position: absolute;
250
  left: -9999px;
251
}
252
 
253
.shot {
254
  overflow: hidden;
255
  height: 100%;
256
  width: 100%;
257
  position: absolute;
258
  left: -100%;
259
 
260
  -webkit-transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
261
  -moz-transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
262
  -o-transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
263
  -ms-transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
264
  transition: all 800ms cubic-bezier(.58,-0.67,1,.83);
265
}
266
 
267
.shot-stats {
268
  position: absolute;
269
  left: 10px;
270
  top: 10px;
271
  color: #FFF;
272
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
273
  z-index: 2;
274
}
275
 
276
.shot-stats:after {
277
  position: absolute;
278
  content: "";
279
  width: 110%;
280
  height: 120%;
281
  left: -5%;
282
  top: -5%;
283
  background: rgba(0, 0, 0, 0.4);
284
  border-radius: 3px;
285
}
286
 
287
.shot-like.entypo-heart,.shot-comments.entypo-comment,.shot-views.entypo-eye {
288
  z-index: 1;
289
  position: relative;
290
}
291
 
292
.shot-stats a {
293
  color: #FFF;
294
}
295
 
296
.shot-stats span:before {
297
  margin-right: 2px;
298
}
299
 
300
.member-shots-number {
301
  padding-right: 6px;
302
  border-right: 1px solid rgba(0, 0, 0, 0.06);
303
  margin-right: 6px;
304
  margin-left: 6px;
305
}
306
 
307
.shot img {
308
  width: 120%;
309
  min-height: 100%;
310
  position: absolute;
311
  left: -10%;
312
}
313
 
314
#next1:checked ~ ul .s1,#next2:checked ~ ul .s2,#next3:checked ~ ul .s3 {
315
  left: 0;
316
}
317
 
318
.member-shots label {
319
  background: #F5F5F5;
320
  height: 40px;
321
  width: 40px;
322
  position: absolute;
323
  bottom: -20px;
324
  z-index: 8;
325
  border-radius: 50%;
326
  left: 50%;
327
  margin-left: -20px;
328
  line-height: 25px;
329
  cursor: pointer;
330
  text-align: center;
331
  text-shadow: 0 1px 0 #FFF;
332
 
333
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.18);
334
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.18);
335
}
336
 
337
.member-shots input:checked + label + input + label {
338
  z-index: 10;
339
}
340
 
341
.member-shots label:nth-of-type(1) {
342
  z-index: 9;
343
}
344
 
345
.next:hover {
346
  color: #777;
347
}
348
 
349
.wrapper-img {
350
  position: absolute;
351
  top: 0;
352
  height: 100%;
353
  width: 100%;
354
  z-index: 2;
355
  cursor: pointer;
356
 
357
  -webkit-transform: rotateX(0deg) rotateY(0deg);
358
  -moz-transform: rotateX(0deg) rotateY(0deg);
359
  -o-transform: rotateX(0deg) rotateY(0deg);
360
  -ms-transform: rotateX(0deg) rotateY(0deg);
361
  transform: rotateX(0deg) rotateY(0deg);
362
 
363
  -webkit-transform-style: preserve-3d;
364
  -moz-transform-style: preserve-3d;
365
  -ms-transform-style: preserve-3d;
366
  transform-style: preserve-3d;
367
  -webkit-backface-visibility: hidden;
368
 
369
  -webkit-transition: all 200ms ease-in-out;
370
  -moz-transition: all 200ms ease-in-out;
371
  -o-transition: all 200ms ease-in-out;
372
  -ms-transition: all 200ms ease-in-out;
373
  transition: all 200ms ease-in-out;
374
}
375
 
376
.member-photo:hover .wrapper-img {
377
  -webkit-transform: rotateX(180deg);
378
  -moz-transform: rotateX(180deg);
379
  -o-transform: rotateX(180deg);
380
  -ms-transform: rotateX(180deg);
381
  transform: rotateX(180deg);
382
}
383
 
384
.member-photo:hover .labelimg {
385
  -webkit-transform: rotateX(0deg);
386
  -moz-transform: rotateX(0deg);
387
  -o-transform: rotateX(0deg);
388
  -ms-transform: rotateX(0deg);
389
  transform: rotateX(0deg);
390
    z-index:3;
391
}
392
 
393
.labelimg {
394
  position: absolute;
395
  top: 0;
396
  height: 100%;
397
  width: 100%;
398
  left: 0;
399
  z-index: 1;
400
  cursor: pointer;
401
 
402
  -webkit-transform: rotateX(-180deg);
403
  -moz-transform: rotateX(-180deg);
404
  -o-transform: rotateX(-180deg);
405
  -ms-transform: rotateX(-180deg);
406
  transform: rotateX(-180deg);
407
 
408
  -webkit-transform-style: preserve-3d;
409
  -moz-transform-style: preserve-3d;
410
  -ms-transform-style: preserve-3d;
411
  transform-style: preserve-3d;
412
  backface-visibility: hidden;
413
  background: #4083A9;
414
  color: #F0F0F0;
415
  text-align: center;
416
  line-height: 80px;
417
  font-size: 40px;
418
  border-radius: 50%;
419
 
420
  -webkit-transition: all 200ms ease-in-out;
421
  -moz-transition: all 200ms ease-in-out;
422
  -o-transition: all 200ms ease-in-out;
423
  -ms-transition: all 200ms ease-in-out;
424
  transition: all 200ms ease-in-out;
425
}
426
 
427
#dropshots:checked ~ .member-shots {
428
  height: 250px;
429
}
430
 
431
#dropshots:checked + .member-infos .wrapper-img {
432
  -webkit-transform: rotateX(180deg);
433
  -moz-transform: rotateX(180deg);
434
  -o-transform: rotateX(180deg);
435
  -ms-transform: rotateX(180deg);
436
  transform: rotateX(180deg);
437
}
438
 
439
#dropshots:checked + .member-infos .labelimg {
440
  -webkit-transform: rotateX(0deg);
441
  -moz-transform: rotateX(0deg);
442
  -o-transform: rotateX(0deg);
443
  -ms-transform: rotateX(0deg);
444
  transform: rotateX(0deg);
445
    z-index:3;
446
}
447
 
 
JavaScript
//https://twitter.com/One_div
1
//https://twitter.com/One_div
2
 
3
//http://one-div.com <-- CSS3 single element database
4
 
 

Dribbble member card concept

CSSDeck G+