Ajax Loader
HTML
 
1
 
2
<div class="content">
3
  <div class="sky">
4
    <div class="moun m1"></div>
5
    <div class="moun m2"></div>
6
    <div class="moun m3"></div>
7
      <div class="cloud c1"></div>
8
      <div class="cloud c2"></div>
9
      <div class="cloud c3"></div>
10
      <div class="cloud c4"></div>
11
  </div>
12
  
13
   <div class="floor">
14
    <div class="under_floor">
15
    </div>
16
  </div>
17
  
18
  <div class="tunel _1"></div>
19
  <div class="tunel _2"></div>
20
  
21
  <div class="supermario">
22
  <div class="head">
23
    <div class="chap"></div>
24
    <div class="hear"></div>
25
    <div class="eye e1"></div>
26
    <div class="eye e2"></div>
27
  </div>
28
  <div class="foot">
29
    <div class="fo1"></div>
30
    <div class="fo2"></div>
31
    <div class="f1"></div>
32
    <div class="f2"></div>
33
  </div>
34
  <div class="body">
35
    <div class="tri"></div>
36
    <div class="bra b1"></div>
37
    <div class="bra b2"></div>
38
  </div>
39
</div>
40
   <div class="trie _t1"></div>
41
  <div class="trie _t2"></div>
42
  <div class="trie _t3"></div>
43
  <div class="trie _t4"></div>
44
  <div class="trie _t5"></div>
45
  <div class="trie _t6"></div>
46
  <div class="trie _t7"></div>
47
  <div class="trie _t8"></div>
48
  <div class="trie _t9"></div>
49
  <div class="trie _t10"></div>
50
  <div class="rbu r1"></div>
51
  <div class="rbu r2"></div>
52
  <div class="rbu r3"></div>
53
  <div class="rbu r4"></div>
54
  <div class="rbu r5"></div>
55
  <div class="rbu r6"></div>
56
  <div class="rbu r7"></div>
57
  <div class="ground g1"></div>
58
  <div class="ground g2"></div>
59
  <div class="score">24431</div>
60
  
61
  <div class="pause"></div>
62
  <footer>
63
  <label><a href="http://www.facebook.com/biodos">Created By :Hajji Tarek</a></label>
64
</footer>
 
CSS
*{
1
*{
2
  padding:0px;
3
}
4
a{
5
  font-weight:bold;
6
  color:#fff;
7
  font-size:11px;
8
  text-decoration:none;
9
  margin:10px;
10
}
11
.pause
12
{
13
  background:#e56400;
14
  position:absolute;
15
  height:52px;
16
  width:52px;
17
  margin:10px;
18
  border:2px solid #5c4600;
19
  left:90%;
20
  border-bottom:4px solid #542801;
21
  box-shadow: 1px 1px 1px white inset;
22
}
23
 .pause:after , .pause:before
24
{
25
  content:'';
26
  position:absolute;
27
  background:#fff;
28
  width:15px;
29
  height:45px;
30
  z-index:1;
31
  margin-left:8px;
32
  margin-top:4px;
33
  border-bottom:1px solid #ad4007;
34
}
35
 .pause:before {
36
   margin-left:30px;
37
}
38
 
39
 
40
 
41
/* Wood Base Gradient */
42
body {
43
  background-color:#D1A46B;
44
    background-image: -webkit-radial-gradient(#D1A46B,#B57744);
45
 
46
    -webkit-background-size: 100%;
47
  background-image:
48
    -webkit-linear-gradient(0,transparent 97%, rgba(214, 171, 119, 0.5) 97%),
49
    -webkit-linear-gradient(0,transparent 93%, rgba(173, 97, 54, 0.45) 93%),
50
    -webkit-linear-gradient(0,transparent 97%, rgba(214, 171, 119, 0.9) 97%);
51
  
52
    -webkit-background-size: 40px;
53
 
54
}
55
.content{
56
  height:600px;
57
  width:1000px;
58
  background:background: #a9e4f7; /* Old browsers */
59
 
60
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 33%, #0e8ed3 35%, #0e8ed3 57%, #76c1b7 68%, #d1b673 77%, #d1b673 100%); /* FF3.6+ */
61
 
62
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7), color-stop(35%,#0e8ed3), color-stop(57%,#0e8ed3), color-stop(68%,#76c1b7), color-stop(77%,#d1b673), color-stop(100%,#d1b673)); /* Chrome,Safari4+ */
63
  border:1px solid #eee;
64
  position:relative;
65
  overflow:hidden;
66
   border:rgb(20,20,20) solid;
67
  border-top:80px solid rgb(20,20,20);
68
  border-left:20px solid rgb(20,20,20);
69
  border-right:20px solid rgb(20,20,20);
70
  border-bottom:100px solid rgb(20,20,20);
71
  border-radius:30px;
72
  box-shadow:0px 1px 0px rgb( 106, 106, 106),
73
             1px 0px 0px rgb(106, 106, 106),
74
            -1px 1px 0px rgb(106, 106, 106),
75
            0px -1px 0px rgb(106, 106, 106),
76
            -1px -1px #AAA, 
77
            1px 1px #333, 
78
            1px 1px #888 inset, 
79
            -1px -1px #bbb inset, 
80
            10px 10px 50px 0 #111,
81
            inset 10px 10px 10px rgba(0,0,0,.2)
82
    ;
83
  margin:50px auto;
84
}
85
.sky{
86
  width:100%;
87
  height:400px;
88
  position:absolute;
89
  z-index:2;
90
  
91
}
92
.moun{
93
  width: 500px;
94
  height: 700px;
95
  background:#afb09e;
96
  transform :rotate(45deg);
97
  position:absolute;
98
  top:180px;
99
  box-shadow:inset 10px 10px 0px #cdd4c4,
100
             inset 20px 20px 0px #c5c3b4; 
101
  border-radius:70px;
102
}
103
.m1{
104
  width: 500px;
105
  height: 700px;
106
  background:#afb09e;
107
  transform :rotate(45deg);
108
  position:absolute;
109
  top:180px;
110
  left:500px;
111
  border-radius:70px;
112
}
113
.m2{
114
  width: 500px;
115
  height: 700px;
116
  background:#afb09e;
117
  transform :rotate(45deg);
118
  position:absolute;
119
  top:180px;
120
  left:00px;
121
  border-radius:70px;
122
  z-index:2;
123
}
124
.m3{
125
  width: 700px;
126
  height: 1000px;
127
  background:#afb09e;
128
  transform :rotate(45deg);
129
  position:absolute;
130
  top:120px;
131
  left:-400px;
132
  border-radius:70px;
133
}
134
.floor{
135
  width:100%;
136
  height:200px;
137
  position:absolute;
138
  top:400px;
139
  z-index:3;
140
  box-shadow:inset 10px 10px 10px rgba(0,0,0,.2),
141
             inset -10px 10px 10px rgba(0,0,0,.2);
142
}
143
/* Tarek Hajji */
144
.supermario{
145
  width:100px;
146
  height:300px;
147
  z-index:100;
148
  position:absolute;
149
  margin-top:90px;
150
}
151
.head{
152
  width:75px;
153
  height:70px;
154
  background:#f5c191;
155
  border-radius:50%;
156
  position:absolute;
157
  box-shadow:2px 3px 0px #000,
158
            2px -1px 0px #000,
159
            inset 4px -4px 0px #ea8e5f;
160
  margin-top:80px;
161
  margin-left:95px
162
}
163
.head:after{
164
  content:"";
165
  width:40px;
166
  height:10px;
167
  background:#000;
168
  position:absolute;
169
  left:50%;
170
  top:60%;
171
  border-radius:20% 40% 30% 100%;
172
  transform : rotate(5deg);
173
  z-index:3;
174
}
175
.head:before{
176
  content:"";
177
  width:35px;
178
  height:25px;
179
  background:#f5c191;
180
  position:absolute;
181
  left:75%;
182
  top:27%;
183
  border-radius:40% 50% 50% 40%;
184
  z-index:5;
185
  box-shadow:2px 3px 0px #000,
186
            2px -1px 0px #000,
187
            inset -2px -3px 0px #ea8e5f;
188
  
189
  transform : rotate(10deg);
190
}
191
.eye{
192
  width:20px;
193
  height:20px;
194
  background:#fff;
195
  position:absolute;
196
  z-index:3;
197
}
198
.e1{
199
  width:10px;
200
  height:10px;
201
  background:#fff;
202
  position:absolute;
203
  left:80%;
204
  top:10px;
205
  border-radius:50% 60% 50% 60%;
206
}
207
.e2{
208
  width:20px;
209
  height:24px;
210
  background:#fff;
211
  position:absolute;
212
  left:50%;
213
  top:6px;
214
  border-radius:60% 80% 60% 80%;  
215
  transform : rotate(-10deg); 
216
  box-shadow:inset 2px 1px 0px #F4F4F4,
217
                 0px -5px 0px #000
218
            ;
219
}
220
 
221
.e1:before{
222
  content:"";
223
  width:4px;
224
  height:4px;
225
  background:#000;
226
  position:absolute;
227
  border-radius:100%;
228
  top:6px;
229
  left:4px;
230
  border-top:1px solid #1b9fed;
231
  border-left:1px solid #1b9fed;
232
}
233
.e2:before{
234
  content:"";
235
  width:6px;
236
  height:6px;
237
  background:#000;
238
  position:absolute;
239
  border-radius:100%;
240
  top:15px;
241
  left:4px;
242
  border-top:3px solid #1b9fed;
243
  border-left:2px solid #1b9fed;
244
  border-top:3px solid #1b9fed;
245
}
246
.chap{
247
  width:86px;
248
  height:70px;
249
  background:#f5477a;
250
  z-index:-1;
251
  position:absolute;
252
  top:-30px;
253
  left:-20px;
254
  border-radius:100% 60% 100% 100%;
255
  transform:rotate(0deg);
256
  border-top:5px solid #60000f;
257
  box-shadow:inset -3px 0px 0px #60000f,
258
            inset 0px -4px 0px #b0275b,
259
            inset -11px 0px 0px #b0275b
260
              ;
261
  
262
}
263
.chap:before{
264
  content:"";
265
  width:20px;
266
  height:20px;
267
  background:#ffd862;
268
  position:absolute;
269
  top:5px;
270
  left:55px;
271
  border-radius:100%;
272
  
273
}
274
.chap:after{
275
  content:"";
276
  width:10px;
277
  height:10px;
278
  background:#fff;
279
  position:absolute;
280
  top:10px;
281
  left:60px;
282
  border-radius:100%;
283
  
284
}
285
.hear{
286
  position:absolute;
287
  width:80px;
288
  height:80px;
289
  background:#000;
290
  left:-5px;
291
  top:-12px;
292
  border-radius:100%;
293
  transform:rotate(40deg);
294
  z-index:-1;
295
}
296
.hear:after{
297
  content:"";
298
  width:35px;
299
  height:25px;
300
  background:#f5c191;
301
  position:absolute;
302
  left:0px;
303
  top:59%;
304
  border-radius:40% 50% 50% 40%;
305
  z-index:8;
306
  box-shadow:2px 3px 0px #000,
307
            2px -1px 0px #000,
308
            inset -0px -5px 0px #ea8e5f;
309
  transform : rotate(30deg);
310
}
311
.hear:before{
312
  content:"";
313
  width:10px;
314
  height:10px;
315
  background:#ea8e5f;
316
  position:absolute;
317
  left:11px;
318
  top:73%;
319
  border-radius:40% 50% 50% 40%;
320
  z-index:9;
321
  transform : rotate(30deg);
322
}
323
 
324
/*body*/
325
.body{
326
  width:70px;
327
  height:100px;
328
  border-radius:40% 40% 100% 80%;
329
  background:#0161cf;
330
  margin-top:150px;
331
  margin-left:90px;
332
  z-index:-1;
333
  position:absolute;
334
  box-shadow:inset -10px 1px 0px #3591fa,
335
             inset 0px 10px 0px #3591fa,
336
             inset 0px -20px 0px #0859b4;
337
}
338
.body:after{
339
  width:6px;
340
  height:6px;
341
  content:"";
342
  background:#fff;
343
  position:absolute;
344
  left:30px;
345
  top:35px;
346
  border-radius:100%;
347
}
348
.body:before{
349
  width:6px;
350
  height:6px;
351
  content:"";
352
  background:#fff;
353
  position:absolute;
354
  left:60px;
355
  top:35px;
356
  border-radius:100%;
357
}
358
.tri{
359
  background:#f84366;
360
  width:30px;
361
  height:40px;
362
  position:absolute;
363
  z-index:1;
364
  left:35px;
365
  border-radius:0% 50% 30% 40%;
366
  box-shadow:-3px 3px 0px #d93152;
367
}
368
.bra{
369
  background:#f84366;
370
  position:absolute;
371
  top:2px;
372
  left:-3px;
373
}
374
.b1{
375
  width:25px;
376
  height:60px;
377
  z-index:1;
378
  transform: rotate(20deg);
379
  border-radius:30% 50% 0% 0%;
380
  box-shadow:-3px 3px 0px #d93152;
381
}
382
.b2{
383
  width:25px;
384
  height:30px;
385
  left:70px;
386
  z-index:-1;
387
  transform: rotate(-100deg);
388
  border-radius:0% 0% 100% 100%;
389
}
390
.b1:after ,.b2:after{
391
   content:"";
392
  width:22px;
393
  height:20px;
394
  background:#f8fef0;
395
  position:absolute;
396
  border-radius:100%;
397
  border:3px solid #93561d;
398
  box-shadow:inset 3px 4px 0px #c18955;
399
}
400
.b2:after{
401
 left:-3px;
402
  top:11px;
403
}
404
.b1:after{
405
  content:"";
406
  width:23px;
407
  height:20px;
408
  background:#f8fef0;
409
  top:50px;
410
  left:-3px;
411
  position:absolute;
412
  border-radius:100%;
413
  border:3px solid #93561d;
414
}
415
.foot div{
416
  position:absolute;
417
  z-index:-1;
418
}
419
.f1{
420
  background:#955228;
421
  width:40px;
422
  height:30px;
423
  left:140px;
424
  top:280px;
425
  transform:rotate(-40deg);
426
  box-shadow:inset 0px -10px 0px #000;
427
  border-radius:5px 20px 10px 20px;
428
}
429
.f2{
430
  top:280px;
431
  background:#955228;
432
  width:40px;
433
  height:30px;
434
  left:60px;
435
  z-index:-5;
436
  transform:rotate(70deg);
437
  box-shadow:inset -5px -5px 0px #000;
438
  border-radius:100% 20px 40px 20px;
439
}
440
.fo1{
441
  width:25px;
442
  height:50px;
443
  top:245px;
444
  left:127px;
445
  transform: rotate(-20deg);
446
  background:#3591fa;
447
  box-shadow:inset 0px 20px rgba(8,89,180,.3);
448
}
449
.fo2{
450
  width:25px;
451
  height:66px;
452
  top:225px;
453
  left:82px;
454
  transform: rotate(30deg);
455
  background:#0859b4;
456
}
457
.floor{
458
  background:#000;
459
  height:100px;
460
  width:100%;
461
}
462
/* Tarek Hajji */
463
.cloud {
464
  width: 200px; height: 60px;
465
  background: #fff;
466
  
467
  border-radius: 200px;
468
  -moz-border-radius: 200px;
469
  -webkit-border-radius: 200px;
470
  
471
  position: relative; 
472
}
473
 
474
.cloud:before, .cloud:after {
475
  content: '';
476
  position: absolute; 
477
  background: #fff;
478
  width: 100px; height: 80px;
479
  position: absolute; top: -15px; left: 10px;
480
  
481
  border-radius: 100px;
482
  -moz-border-radius: 100px;
483
  -webkit-border-radius: 100px;
484
  
485
  -webkit-transform: rotate(30deg);
486
  transform: rotate(30deg);
487
  -moz-transform: rotate(30deg);
488
}
489
.cloud:after {
490
  width: 120px; height: 120px;
491
  top: -55px; left: auto; right: 15px;
492
}
493
.c1 {
494
  -webkit-animation: moveclouds 15s linear infinite;
495
  -moz-animation: moveclouds 15s linear infinite;
496
  -o-animation: moveclouds 15s linear infinite;
497
  left:400px;
498
  top:100px
499
}
500
.c3 {
501
  z-index:-1;
502
  left: 500px; top: 130px;
503
  
504
  -webkit-transform: scale(0.8);
505
  -moz-transform: scale(0.8);
506
  transform: scale(0.8);
507
  opacity: 0.8; 
508
}
509
.c2 {
510
  left: 200px;
511
  
512
  -webkit-transform: scale(0.6);
513
  -moz-transform: scale(0.6);
514
  transform: scale(0.6);
515
  opacity: 0.6;
516
}
517
 
518
.c4 {
519
  left: 700px;
520
  top:-100px;
521
  -webkit-transform: scale(0.6);
522
  -moz-transform: scale(0.6);
523
  transform: scale(0.6);
524
  opacity: 1;
525
}
526
.floor
527
{
528
  background:#ddd894;
529
  border-top:5px solid #d6ba70;
530
  height:300px;
531
}
532
.under_floor
533
{
534
  border-top:40px dotted #6fb926;
535
  box-shadow:1px 1px 1px #447f21;
536
  background:#97e754;
537
}
538
 
539
.tunel
540
{
541
  position:absolute;
542
  height:180px;
543
  width:60px;
544
  margin-left:40px;
545
  top:222px;
546
  background:#74bf2e;
547
  border:1px solid #74bf2e;
548
  z-index:5;
549
  box-shadow:inset 13px 0px 2px #9ae75b ,
550
             inset 15px 0px 1px #f3fc85 ,
551
             inset 18px 0px 2px #9ae75b ,
552
             inset 19px 0px 2px #71bc2b ,
553
             inset 21px 0px 2px #9ae75b ,
554
    /*--------------------------------------*/
555
             inset -14px 0px 1px #538127 ,
556
             inset -16px 0px 1px #78c32a ,
557
             inset -18px 0px 1px #4d7e22 ;
558
margin-top:-2px;
559
  border:1px solid rgba(0,0,0,.2);
560
  border-bottom:none;
561
}
562
._1:after , ._2:after
563
{
564
   width:82px;
565
    height:30px;
566
    content:'';
567
    z-index:6;
568
   background:#74bf2e;
569
  position:absolute;
570
  margin:-14px 0px 0px -12px;
571
   box-shadow:inset 13px 0px 2px #9ae75b ,
572
             inset 15px 0px 1px #f3fc85 ,
573
             inset 18px 0px 2px #9ae75b ,
574
             inset 19px 0px 2px #71bc2b ,
575
             inset 21px 0px 2px #9ae75b ,
576
    /*--------------------------------------*/
577
             inset -14px 0px 1px #538127 ,
578
             inset -16px 0px 1px #78c32a ,
579
             inset -18px 0px 1px #4d7e22 ;
580
  border:1px solid rgba(0,0,0,.2);
581
}
582
._1{left:300px}
583
._2{left:750px; height:100px;top:302px}
584
.trie
585
{
586
  position:absolute;
587
  background:#84e28c;
588
  border-radius:100% 100% 0px 0px;
589
  border-top:30px solid #46AA5E;
590
  border-left:10px solid #46AA5E;
591
  z-index:2;
592
  box-shadow:10px 2px 2px rgba(0,0,0,.3);
593
}
594
._t1{margin-left:0px;width:140px;height:120px;margin-top:302px;}
595
._t2{margin-left:120px;width:120px;height:110px;margin-top:342px;}
596
._t3{margin-left:230px;width:130px;height:120px;margin-top:322px;}
597
._t4{margin-left:300px;width:150px;height:130px;margin-top:272px;}
598
._t5{margin-left:370px;width:120px;height:110px;margin-top:292px;}
599
._t6{margin-left:431px;width:140px;height:120px;margin-top:352px;}
600
._t7{margin-left:550px;width:140px;height:110px;margin-top:292px;}
601
._t8{margin-left:600px;width:120px;height:110px;margin-top:322px;}
602
._t9{margin-left:710px;width:140px;height:120px;margin-top:312px;}
603
._t10{margin-left:850px;width:140px;height:110px;margin-top:362px;}
604
.score{
605
  position:absolute;
606
  color:white;
607
  text-shadow:2px 1px black,
608
              -2px 1px black,
609
               2px -2px black,
610
                1px -2px black;   
611
  font-size:39px;
612
  margin:15px 43%;
613
font-family: 'Erica One', cursive;
614
  z-index:999;
615
}
616
.rbu{
617
  width:60px;
618
  height:60px;
619
  background:#fee445;
620
  z-index:999;
621
  position:absolute;
622
  border-radius:50%;
623
  border:4px solid #000;
624
  border-left:2px solid #000;
625
  border-right:2px solid #000;
626
  box-shadow:inset 5px -6px 0px #cfaa1d,
627
             inset -5px 6px 0px #fff78e;
628
  top:300px;
629
  /*#c84c0c*/
630
}
631
.rbu:after{
632
  content:"";
633
  position:absolute;
634
  width:7px;
635
  height:30px;
636
  background:#cfaa1d;
637
  border-radius:20%;
638
  margin-left:30px;
639
  margin-top:15px;
640
  box-shadow:
641
              -5px 0px 0px #fff78e;
642
}
643
.r1{left:520px;-webkit-transform: rotateY(30deg);
644
    transform: rotateY(30deg);}
645
.r2{top:120px;left:590px;-webkit-transform: rotateY(130deg);
646
    transform: rotateY(60deg);}
647
.r3{top:120px;left:660px;}
648
.r4{left:450px;-webkit-transform: rotateY(40deg);
649
    transform: rotateY(40deg);}
650
.r5{left:900px;-webkit-transform: rotateY(60deg);
651
    transform: rotateY(60deg);}
652
.r6{top:130px;left:340px;}
653
.r7{
654
  top:20px;
655
  transform:scale(0.6,0.6);
656
}
657
.r7:before{
658
  content:"420";
659
  margin-left:67px;
660
  margin-top:10px;
661
  position:absolute;
662
  font-size:35px;
663
  font-weight:bold;
664
  color:black;
665
}
666
.ground{
667
  position:absolute;
668
  width:60px;
669
  height:60px;
670
  background:#c84c0c;
671
  box-shadow:inset 3px 0px 0px #000,
672
    inset 13px 0px 0px #c84c0c,
673
    inset 23px 0px 0px #000,
674
    inset 33px 0px 0px #c84c0c,
675
    inset 0px 5px 0px #c84c0c,
676
    inset 0px 15px 0px #000,
677
    inset 0px 20px 0px #c84c0c,
678
    inset 0px 25px 0px #000,
679
    inset 0px 35px 0px #c84c0c,
680
    inset 0px 45px 0px #000,
681
    inset 0px 55px 0px #c84c0c;
682
  border:1px solid #000;
683
  z-index:999;
684
  }
685
.g1{
686
 
687
  top:200px;
688
  left:600px;
689
}
690
.g2{
691
  top:200px;
692
  left:660px;
693
  transform:rotateY(180deg);
694
  border-right:5px solid #000;
695
}
 

SUPER MARIO FULL CSS

CSSDeck G+