Ajax Loader
×
HTML
<a href="http://twitter.com/neoberg" class="twitter">@neoberg</a>
1
<a href="http://twitter.com/neoberg" class="twitter">@neoberg</a>
2
<a href="mailto:neoberg@gmail.com" class="hireme">Hire Me</a>
3
<h1>CSS Only MacBook Air</h1>
4
<div class="macbook">
5
  <div class="inner">
6
    <div class="screen">
7
      <div class="face-one">
8
        <div class="camera"></div>
9
        <div class="display">
10
          <div class="shade"></div>
11
        </div>
12
        <span>MacBook Air</span>
13
      </div>
14
      <img src="http://brkcan.net/fun/codepen/apple-logo.svg" class="logo">
15
    </div>
16
    <div class="body">
17
      <div class="face-one">
18
        <div class="touchpad">
19
        </div>
20
        <div class="keyboard">
21
          <div class="key"></div>
22
          <div class="key"></div>
23
          <div class="key"></div>
24
          <div class="key"></div>
25
          <div class="key"></div>
26
          <div class="key space"></div>
27
          <div class="key"></div>
28
          <div class="key"></div>
29
          <div class="key"></div>
30
          <div class="key"></div>
31
          <div class="key"></div>
32
          <div class="key"></div>
33
          <div class="key"></div>
34
          <div class="key"></div>
35
          <div class="key"></div>
36
          <div class="key"></div>
37
          <div class="key"></div>
38
          <div class="key"></div>
39
          <div class="key"></div>
40
          <div class="key"></div>
41
          <div class="key"></div>
42
          <div class="key"></div>
43
          <div class="key"></div>
44
          <div class="key"></div>
45
          <div class="key"></div>
46
          <div class="key"></div>
47
          <div class="key"></div>
48
          <div class="key"></div>
49
          <div class="key"></div>
50
          <div class="key"></div>
51
          <div class="key"></div>
52
          <div class="key"></div>
53
          <div class="key"></div>
54
          <div class="key"></div>
55
          <div class="key"></div>
56
          <div class="key"></div>
57
          <div class="key"></div>
58
          <div class="key"></div>
59
          <div class="key"></div>
60
          <div class="key"></div>
61
          <div class="key"></div>
62
          <div class="key"></div>
63
          <div class="key"></div>
64
          <div class="key"></div>
65
          <div class="key"></div>
66
          <div class="key"></div>
67
          <div class="key"></div>
68
          <div class="key"></div>
69
          <div class="key"></div>
70
          <div class="key"></div>
71
          <div class="key"></div>
72
          <div class="key"></div>
73
          <div class="key"></div>
74
          <div class="key"></div>
75
          <div class="key"></div>
76
          <div class="key"></div>
77
          <div class="key"></div>
78
          <div class="key"></div>
79
          <div class="key"></div>
80
          <div class="key f"></div>
81
          <div class="key f"></div>
82
          <div class="key f"></div>
83
          <div class="key f"></div>
84
          <div class="key f"></div>
85
          <div class="key f"></div>
86
          <div class="key f"></div>
87
          <div class="key f"></div>
88
          <div class="key f"></div>
89
          <div class="key f"></div>
90
          <div class="key f"></div>
91
          <div class="key f"></div>
92
          <div class="key f"></div>
93
          <div class="key f"></div>
94
          <div class="key f"></div>
95
          <div class="key f"></div>
96
        </div>
97
      </div>
98
      <div class="pad one"></div>
99
      <div class="pad two"></div>
100
      <div class="pad three"></div>
101
      <div class="pad four"></div>
102
    </div>
103
  </div>
104
  <div class="shadow"></div>
105
</div>
106
 
 
CSS
body {
1
body {
2
    background: #fff;
3
    font-family: Helvetica, Arial, sans-serif;
4
  }
5
  
6
  .macbook {
7
    width: 150px;
8
    height: 96px;
9
    position: absolute;
10
    left: 50%;
11
    top: 50%;
12
    margin: -75px 0 0 -78px;
13
    perspective: 500px;
14
  }
15
  .shadow {
16
    position: absolute;
17
    width: 60px;
18
    height: 0px;
19
    left: 40px;
20
    top: 160px;
21
    transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
22
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
23
    animation: shadow infinite 7s ease;
24
  }
25
  .inner {
26
    z-index: 20;
27
    position: absolute;
28
    width: 150px;
29
    height: 96px;
30
    left: 0;
31
    top: 0;
32
    transform-style: preserve-3d;
33
    transform:rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
34
    animation: rotate infinite 7s ease;
35
  }
36
  .screen {
37
    width: 150px;
38
    height: 96px;
39
    position: absolute;
40
    left: 0;
41
    bottom: 0;
42
    border-radius: 7px;
43
    background: #ddd;
44
    transform-style: preserve-3d;
45
    transform-origin: 50% 93px;
46
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
47
    animation: lid-screen infinite 7s ease;
48
    background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
49
    background-position: left bottom;
50
    background-size: 300px 300px;
51
    box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
52
  }
53
  .screen .logo {
54
    position: absolute;
55
    width: 20px;
56
    height: 24px;
57
    left: 50%;
58
    top: 50%;
59
    margin: -12px 0 0 -10px;
60
    transform: rotateY(180deg) translateZ(0.1px);
61
  }
62
  .screen .face-one {
63
    width: 150px;
64
    height: 96px;
65
    position: absolute;
66
    left: 0;
67
    bottom: 0;
68
    border-radius: 7px;
69
    background: #d3d3d3;
70
    transform: translateZ(2px);
71
    background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
72
  }
73
  .screen .face-one .camera {
74
    width: 3px;
75
    height: 3px;
76
    border-radius: 100%;
77
    background: #000;
78
    position: absolute;
79
    left: 50%;
80
    top: 4px;
81
    margin-left: -1.5px;
82
  }
83
  .screen .face-one .display {
84
    width: 130px;
85
    height: 74px;
86
    margin: 10px;
87
    background: url("http://brkcan.net/fun/codepen/macbookss.png") no-repeat center center #000;
88
    border-radius: 1px;
89
    position: relative;
90
    box-shadow: inset 0 0 2px rgba(0,0,0,1);
91
  }
92
  .screen .face-one .display .shade {
93
    position: absolute;
94
    left: 0;
95
    top: 0;
96
    width: 130px;
97
    height: 74px;
98
    background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
99
    animation: screen-shade infinite 7s ease;
100
    background-size: 300px 200px;
101
    background-position: 0px 0px;
102
  }
103
  .screen .face-one span {
104
    position: absolute;
105
    top: 85px;
106
    left: 57px;
107
    font-size: 6px;
108
    color: #666
109
  }
110
  
111
  .body {
112
    width: 150px;
113
    height: 96px;
114
    position: absolute;
115
    left: 0;
116
    bottom: 0;
117
    border-radius: 7px;
118
    background: #cbcbcb;
119
    transform-style: preserve-3d;
120
    transform-origin: 50% bottom;
121
    transform: rotateX(-90deg);
122
    animation: lid-body infinite 7s ease;
123
    background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
124
  }
125
  .body .face-one {
126
    width: 150px;
127
    height: 96px;
128
    position: absolute;
129
    left: 0;
130
    bottom: 0;
131
    border-radius: 7px;
132
    transform-style: preserve-3d;
133
    background: #dfdfdf;
134
    animation: lid-keyboard-area infinite 7s ease;
135
    transform: translateZ(-2px);
136
    background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
137
  }
138
  .body .touchpad {
139
    width: 40px;
140
    height: 31px;
141
    position: absolute;
142
    left: 50%;
143
    top: 50%;
144
    border-radius: 4px;
145
    margin: -44px 0 0 -18px;
146
    background: #cdcdcd;
147
    background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
148
    box-shadow: inset 0 0 3px #888;
149
  }
150
  .body .keyboard {
151
  width: 130px;
152
  height: 45px;
153
  position: absolute;
154
  left: 7px;
155
  top: 41px;
156
  border-radius: 4px;
157
  transform-style: preserve-3d;
158
  background: #cdcdcd;
159
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
160
  box-shadow: inset 0 0 3px #777;
161
  padding: 0 0 0 2px;
162
  }
163
  .keyboard .key {
164
    width: 6px;
165
    height: 6px;
166
    background: #444;
167
    float: left;
168
    margin: 1px;
169
    transform: translateZ(-2px);
170
    border-radius: 2px;
171
    box-shadow: 0 -2px 0 #222;
172
    animation: keys infinite 7s ease;
173
  }
174
  .key.space {
175
    width: 45px;
176
  }
177
  .key.f {
178
    height: 3px;
179
  }
180
  .body .pad {
181
    width: 5px;
182
    height: 5px;
183
    background: #333;
184
    border-radius: 100%;
185
    position: absolute;
186
  }
187
  .pad.one {
188
    left: 20px;
189
    top: 20px;
190
  }
191
  .pad.two {
192
    right: 20px;
193
    top: 20px;
194
  }
195
  .pad.three {
196
    right: 20px;
197
    bottom: 20px;
198
  }
199
  .pad.four {
200
    left: 20px;
201
    bottom: 20px;
202
  }
203
  
204
  @keyframes rotate {
205
    0% {
206
      transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
207
    }
208
    5% {
209
      transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
210
    }
211
    20% {
212
      transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
213
    }
214
    25% {
215
      transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
216
    }
217
    60% {
218
      transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
219
    }
220
    65% {
221
      transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
222
    }
223
    80% {
224
      transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
225
    }
226
    85% {
227
      transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
228
    }
229
    87% {
230
      transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
231
    }
232
    100% {
233
      transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
234
    }
235
  }
236
  
237
  @keyframes lid-screen {
238
    0% {
239
      transform: rotateX(0deg);
240
      background-position: left bottom;
241
    }
242
    5% {
243
      transform: rotateX(50deg);
244
      background-position: left bottom;
245
    }
246
    20% {
247
      transform: rotateX(-90deg);
248
      background-position: -150px top;
249
    }
250
    25% {
251
      transform: rotateX(15deg);
252
      background-position: left bottom;
253
    }
254
    30% {
255
      transform: rotateX(-5deg);
256
      background-position: right top;
257
    }
258
    38% {
259
      transform: rotateX(5deg);
260
      background-position: right top;
261
    }
262
    48% {
263
      transform: rotateX(0deg);
264
      background-position: right top;
265
    }
266
    90% {
267
      transform: rotateX(0deg);
268
      background-position: right top;
269
    }
270
    100% {
271
      transform: rotateX(0deg);
272
      background-position: right center;
273
    }
274
  }
275
  
276
  @keyframes lid-body {
277
    0% {
278
      transform: rotateX(-90deg);
279
      
280
    }
281
    50% {
282
      transform: rotateX(-90deg);
283
      
284
    }
285
    100% {
286
      transform: rotateX(-90deg);
287
      
288
    }
289
  }
290
  
291
  @keyframes lid-keyboard-area {
292
    0% {
293
       background-color: #dfdfdf;
294
    }
295
    50% {
296
      background-color: #bbb;
297
    }
298
    100% {
299
      background-color: #dfdfdf;
300
    }
301
  }
302
  @keyframes screen-shade {
303
    0% {
304
      background-position: -20px 0px;
305
    }
306
    5% {
307
      background-position: -40px 0px;
308
    }
309
    20% {
310
      background-position: 200px 0;
311
    }
312
    50% {
313
      background-position: -200px 0;
314
    }
315
    80% {
316
      background-position: 0px 0px;
317
    }
318
    85% {
319
      background-position: -30px 0;
320
    }
321
    90% {
322
      background-position: -20px 0;
323
    }
324
    100% {
325
      background-position: -20px 0px;
326
    }
327
  }
328
  @keyframes keys {
329
    0% {
330
      box-shadow: 0 -2px 0 #222;
331
    }
332
    5% {
333
      box-shadow: 1 -1px 0 #222;
334
    }
335
    20% {
336
      box-shadow: -1px 1px 0 #222;
337
    }
338
    25% {
339
      box-shadow: -1px 1px 0 #222;
340
    }
341
    60% {
342
      box-shadow: -1px 1px 0 #222;
343
    }
344
    80% {
345
      box-shadow: 0 -2px 0 #222;
346
    }
347
    85% {
348
      box-shadow: 0 -2px 0 #222;
349
    }
350
    87% {
351
      box-shadow: 0 -2px 0 #222;
352
    }
353
    100% {
354
      box-shadow: 0 -2px 0 #222;
355
    }
356
  }
357
  @keyframes shadow {
358
    0% {
359
      transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
360
      box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
361
    }
362
    5% {
363
      transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
364
      box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
365
    }
366
    20% {
367
      transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
368
      box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
369
    }
370
    25% {
371
      transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
372
      box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
373
    }
374
    60% {
375
      transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
376
      box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
377
    }
378
    100% {
379
      box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
380
    }
381
  }
382
  .twitter {
383
    display: block;
384
    width:  120px;
385
    height: 40px;
386
    line-height: 40px;
387
    background: #00c6ff;
388
    border-radius: 8px;
389
    text-align: center;
390
    text-decoration: none;
391
    color: #fff;
392
    position: absolute;
393
    left: 50%;
394
    top: 50%;
395
    margin: 170px 0 0 -130px;
396
  }
397
.hireme {
398
    display: block;
399
    width:  120px;
400
    height: 40px;
401
    line-height: 40px;
402
    background: #ff5400;
403
    border-radius: 8px;
404
    text-align: center;
405
    text-decoration: none;
406
    color: #fff;
407
    position: absolute;
408
    left: 50%;
409
    top: 50%;
410
    margin: 170px 0 0 10px;
411
  }
412
  .twitter:hover,
413
  .hireme:hover {
414
    opacity: 0.7;
415
  }
416
  h1 {
417
    width: 600px;
418
    position: absolute;
419
    left: 50%;
420
    top:  50%;
421
    font-weight: 100;
422
    font-size: 24px;
423
    text-align: center;
424
    margin: -250px 0 0 -300px;
425
    padding: 0;
426
    color: #444;
427
  }
428
 
 

Untitled

CSSDeck G+