Ajax Loader
HTML 
    <div class="lb"  id="toolbar" ><a href="#pop" id="plop"><p><span></span><span></span><span></span></p></a></div>
1
    <div class="lb"  id="toolbar" ><a href="#pop" id="plop"><p><span></span><span></span><span></span></p></a></div>
2
<div class="nb"  id="newbar" ><a href="#plop" id="plopnew"><p>+</p></a></div>
3
        
4
<div id="cl">
5
<div class="browser" id="br" id="bn">
6
    <span id="btn"><a href="#br#bn">+</a></span>
7
       <div class="top-bar">
8
           <span class="orb red"><a href="#newbar">x</a></span>
9
           <span class="orb yellow"> <a href="#toolbar">-</a></span>
10
           <span class="orb green"><a href="#br">+</a></span>
11
          
12
           <span id="title">You - Bash - 1000x1000</span>
13
       </div><!-- #top-bar -->
14
    
15
      
16
       <div class="window" >
17
          <div id="screen" contenteditable="true">
18
    <span id="infos">
19
Last login: Sun May 13 16:47:41 on ttys002
20
</span>
21
    <p>Join cssdeck.com on <strong>IRC</strong></p>
22
        <p>You can access with <a  contenteditable="false" href="http://webchat.freenode.net">Freenode webchat</a></p>
23
    <p>Or open your <strong>terminal/command prompt/command Line</strong></p>
24
    <p>If you have an <span></span> device, type <strong>EMACS</strong>, if you dont, download <strong>EMACS</strong></P>
25
    <p>When <strong>EMACS</strong> is loaded, type <strong>IRC</strong></p>
26
    <p>When IRC is active, type the command <strong>/join #cssdeck</strong><span id="end" enable=false>|</span></p>
27
</div>  
28
 
29
 
30
        </div>
31
    </div><!-- #browser -->
32
</div>            
33
 
34
 
35
<script type="text/javascript" >
36
  $(document).ready(function() {
37
        $( "#draggable" ).draggable();
38
    });
39
</script>
40
 
 
CSS 
body{
1
body{
2
    background:url(http://lab.web-gate.fr/images/apple.jpg) 100%;
3
    color:#fff;
4
    font-family:courier;
5
}
6
a{color:#0fBA06}
7
#infos{color:#0FBA06;}
8
p{color:green;}
9
p:before{content:"User:~ You$ "; color:#0fba06;}
10
p:after{content:"."; color:#0fba06;}
11
p:last-child:after{content:""; color:#0fba06;}
12
 
13
#title{
14
width:200px;
15
display:block;
16
float:left;
17
font-weight:bold;
18
 text-shadow: 1px 1px 0px rgba(255,255,255,.6),                
19
         0px 0px 4px rgba(255,255,255,.3);
20
margin-top:-10px;}
21
#end{
22
 -webkit-animation:     glowing 1s infinite;
23
     -moz-animation:    glowing 1s infinite;
24
     -ms-animation:     glowing 1s infinite;
25
    display:inline;
26
 
27
}
28
span{font-size:20px;}
29
 
30
/* First, create the keyframes behavior */
31
 
32
@-webkit-keyframes glowing {
33
    0%    { color:#0fba06; }
34
    50%   {color:transparent; }
35
    100% { color:#0fba06; }
36
}
37
@-moz-keyframes glowing {
38
        0%    { color:#0fba06; }
39
    50%   {color:transparent; }
40
    100% { color:#0fba06; }
41
}
42
@-ms-keyframes glowing {
43
        0%    { color:#0fba06; }
44
    50%   {color:transparent; }
45
    100% { color:#0fba06; }
46
}
47
 
48
 
49
#cl { margin-top: -30px }
50
 
51
.browser {
52
    /*box-shadow*/
53
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
54
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
55
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
56
    /*background-clip*/
57
    -webkit-background-clip: padding-box;
58
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
59
    /*@@prefixmycss->No equivalent*/
60
    : ;
61
    /*border-radius*/
62
    -webkit-border-radius: 5px;
63
    -moz-border-radius: 5px;
64
    border-radius: 5px;
65
    width: 70%;
66
    margin: 50px auto 0;
67
    border: 1px solid rgba(0, 0, 0, 0.2);
68
    font-family: Helvetica, Arial, sans-serif;
69
    font-size: 12px;
70
  
71
}
72
.browser .top-bar {
73
    background: #d4d4d4;
74
    background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#bcbcbc));
75
    /*linear-gradient*/
76
    background: -webkit-gradient(linear,left top,left bottom,from(#e9e9e9),to(#bcbcbc));
77
    background: -webkit-linear-gradient(#e9e9e9, #bcbcbc);
78
    background: -moz-linear-gradient(#e9e9e9, #bcbcbc);
79
    background: -o-linear-gradient(#e9e9e9, #bcbcbc);
80
    background: linear-gradient(#e9e9e9, #bcbcbc);
81
    background: -webkit-linear-gradient(center top, #e9e9e9 0%, #bcbcbc 100%);
82
    background: -moz-linear-gradient(center top, #e9e9e9 0%, #bcbcbc 100%);
83
    background: -o-linear-gradient(center top, #e9e9e9 0%, #bcbcbc 100%);
84
    background: linear-gradient(center top, #e9e9e9 0%, #bcbcbc 100%);
85
    background: -moz-gradient(center top, #e9e9e9 0%, #bcbcbc 100%);
86
    background: -webkit-linear-gradient(#e9e9e9 0%, #bcbcbc 100%);
87
    background: -moz-linear-gradient(#e9e9e9 0%, #bcbcbc 100%);
88
    background: -o-linear-gradient(#e9e9e9 0%, #bcbcbc 100%);
89
    background: linear-gradient(#e9e9e9 0%, #bcbcbc 100%);
90
    /*background-clip*/
91
    -webkit-background-clip: padding-box;
92
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
93
    /*@@prefixmycss->No equivalent*/
94
    /*border-radius*/
95
    -webkit-border-radius: 5px 5px 0 0;
96
    -moz-border-radius: 5px 5px 0 0;
97
    border-radius: 5px 5px 0 0;
98
    height: 25px;
99
    padding-left: 12px;
100
}
101
.browser .center-bar {
102
    background: #d8d9d9;
103
    background: -webkit-gradient(linear, left top, left bottom, from(#e5e6e6), to(#cfcfcf));
104
    /*linear-gradient*/
105
    background: -webkit-gradient(linear,left top,left bottom,from(#e5e6e6),to(#cfcfcf));
106
    background: -webkit-linear-gradient(#e5e6e6, #cfcfcf);
107
    background: -moz-linear-gradient(#e5e6e6, #cfcfcf);
108
    background: -o-linear-gradient(#e5e6e6, #cfcfcf);
109
    background: linear-gradient(#e5e6e6, #cfcfcf);
110
    background: -webkit-linear-gradient(center top, #e5e6e6 0%, #cfcfcf 100%);
111
    background: -moz-linear-gradient(center top, #e5e6e6 0%, #cfcfcf 100%);
112
    background: -o-linear-gradient(center top, #e5e6e6 0%, #cfcfcf 100%);
113
    background: linear-gradient(center top, #e5e6e6 0%, #cfcfcf 100%);
114
    background: -moz-gradient(center top, #e5e6e6 0%, #cfcfcf 100%);
115
    background: -webkit-linear-gradient(#e5e6e6 0%, #cfcfcf 100%);
116
    background: -moz-linear-gradient(#e5e6e6 0%, #cfcfcf 100%);
117
    background: -o-linear-gradient(#e5e6e6 0%, #cfcfcf 100%);
118
    background: linear-gradient(#e5e6e6 0%, #cfcfcf 100%);
119
    /*box-shadow*/
120
    -webkit-box-shadow: inset 0 1px 0 #f9f9f9;
121
    -moz-box-shadow: inset 0 1px 0 #f9f9f9;
122
    box-shadow: inset 0 1px 0 #f9f9f9;
123
    white-space: nowrap;
124
    overflow: hidden;
125
    text-overflow: ellipsis;
126
    border-top: 1px solid #979797;
127
    border-bottom: 1px solid #7a7a7a;
128
    height: 30px;
129
    padding: 5px 12px 0;
130
}
131
.browser .window {
132
    /*background-clip*/
133
    -webkit-background-clip: padding-box;
134
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
135
    /*@@prefixmycss->No equivalent*/
136
    : ;
137
    /*border-radius*/
138
    -webkit-border-radius: 0 0 5px 5px;
139
    -moz-border-radius: 0 0 5px 5px;
140
    border-radius: 0 0 5px 5px;
141
    height: auto;
142
    background: #000;
143
    padding:10px;
144
}
145
.window {
146
border:8px solid #bdbdbd;}
147
.browser .orb {
148
    /*box-shadow*/
149
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.7);
150
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.7);
151
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.7);
152
    /*background-clip*/
153
    -webkit-background-clip: padding-box;
154
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
155
    /*@@prefixmycss->No equivalent*/
156
    : ;
157
    /*border-radius*/
158
    -webkit-border-radius: 30px;
159
    -moz-border-radius: 30px;
160
    border-radius: 30px;
161
    display: block;
162
    float: left;
163
    margin: 13px 8px 0 0;
164
    width: 12px;
165
    height: 12px;
166
    position: relative;
167
    overflow: hidden;
168
    color: transparent;
169
    font-size: 10px;
170
    text-align: center;
171
    text-decoration: none;
172
    z-index: 100;
173
}
174
.orb a,
175
#btn a {
176
    color: transparent;
177
    font-size: 10px;
178
    text-align: center;
179
}
180
.browser .orb:after {
181
    /*background-clip*/
182
    -webkit-background-clip: padding-box;
183
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
184
    /*@@prefixmycss->No equivalent*/
185
    : ;
186
    /*border-radius*/
187
    -webkit-border-radius: 2px 2px 0 0;
188
    -moz-border-radius: 2px 2px 0 0;
189
    border-radius: 2px 2px 0 0;
190
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
191
    /*linear-gradient*/
192
    background: -webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255, 255, 255, 0)));
193
    background: -webkit-linear-gradient(white, rgba(255, 255, 255, 0));
194
    background: -moz-linear-gradient(white, rgba(255, 255, 255, 0));
195
    background: -o-linear-gradient(white, rgba(255, 255, 255, 0));
196
    background: linear-gradient(white, rgba(255, 255, 255, 0));
197
    background: -webkit-linear-gradient(center top, white 0%, rgba(255, 255, 255, 0) 100%);
198
    background: -moz-linear-gradient(center top, white 0%, rgba(255, 255, 255, 0) 100%);
199
    background: -o-linear-gradient(center top, white 0%, rgba(255, 255, 255, 0) 100%);
200
    background: linear-gradient(center top, white 0%, rgba(255, 255, 255, 0) 100%);
201
    background: -moz-gradient(center top, white 0%, rgba(255, 255, 255, 0) 100%);
202
    background: -webkit-linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
203
    background: -moz-linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
204
    background: -o-linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
205
    background: linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
206
    content: '';
207
    display: block;
208
    height: 3px;
209
    width: 6px;
210
    position: absolute;
211
    top: 2px;
212
    left: 3px;
213
}
214
.browser .orb:before {
215
    /*background-clip*/
216
    -webkit-background-clip: padding-box;
217
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
218
    /*@@prefixmycss->No equivalent*/
219
    : ;
220
    /*border-radius*/
221
    -webkit-border-radius: 10px;
222
    -moz-border-radius: 10px;
223
    border-radius: 10px;
224
    /*box-shadow*/
225
    -webkit-box-shadow: 0 0 5px white;
226
    -moz-box-shadow: 0 0 5px white;
227
    box-shadow: 0 0 5px white;
228
    content: '';
229
    display: block;
230
    height: 10px;
231
    bottom: -10px;
232
    left: 0;
233
    right: 0;
234
    position: absolute;
235
}
236
.browser .orb.red {
237
    background: #f0554d;
238
    background: -webkit-gradient(linear, left top, left bottom, from(#e63933), to(#f3736b));
239
    /*linear-gradient*/
240
    background: -webkit-gradient(linear,left top,left bottom,from(#e63933),to(#f3736b));
241
    background: -webkit-linear-gradient(#e63933, #f3736b);
242
    background: -moz-linear-gradient(#e63933, #f3736b);
243
    background: -o-linear-gradient(#e63933, #f3736b);
244
    background: linear-gradient(#e63933, #f3736b);
245
    background: -webkit-linear-gradient(center top, #e63933 0%, #f3736b 100%);
246
    background: -moz-linear-gradient(center top, #e63933 0%, #f3736b 100%);
247
    background: -o-linear-gradient(center top, #e63933 0%, #f3736b 100%);
248
    background: linear-gradient(center top, #e63933 0%, #f3736b 100%);
249
    background: -moz-gradient(center top, #e63933 0%, #f3736b 100%);
250
    background: -webkit-linear-gradient(#e63933 0%, #f3736b 100%);
251
    background: -moz-linear-gradient(#e63933 0%, #f3736b 100%);
252
    background: -o-linear-gradient(#e63933 0%, #f3736b 100%);
253
    background: linear-gradient(#e63933 0%, #f3736b 100%);
254
}
255
.browser .orb.green {
256
    background: #7dbb5d;
257
    background: -webkit-gradient(linear, left top, left bottom, from(#7dbb5d), to(#afdb92));
258
    /*linear-gradient*/
259
    background: -webkit-gradient(linear,left top,left bottom,from(#7dbb5d),to(#afdb92));
260
    background: -webkit-linear-gradient(#7dbb5d, #afdb92);
261
    background: -moz-linear-gradient(#7dbb5d, #afdb92);
262
    background: -o-linear-gradient(#7dbb5d, #afdb92);
263
    background: linear-gradient(#7dbb5d, #afdb92);
264
    background: -webkit-linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
265
    background: -moz-linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
266
    background: -o-linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
267
    background: linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
268
    background: -moz-gradient(center top, #7dbb5d 0%, #afdb92 100%);
269
    background: -webkit-linear-gradient(#7dbb5d 0%, #afdb92 100%);
270
    background: -moz-linear-gradient(#7dbb5d 0%, #afdb92 100%);
271
    background: -o-linear-gradient(#7dbb5d 0%, #afdb92 100%);
272
    background: linear-gradient(#7dbb5d 0%, #afdb92 100%);
273
}
274
.browser .orb.yellow {
275
    background: #fda12e;
276
    background: -webkit-gradient(linear, left top, left bottom, from(#fda12e), to(#ffcc64));
277
    /*linear-gradient*/
278
    background: -webkit-gradient(linear,left top,left bottom,from(#fda12e),to(#ffcc64));
279
    background: -webkit-linear-gradient(#fda12e, #ffcc64);
280
    background: -moz-linear-gradient(#fda12e, #ffcc64);
281
    background: -o-linear-gradient(#fda12e, #ffcc64);
282
    background: linear-gradient(#fda12e, #ffcc64);
283
    background: -webkit-linear-gradient(center top, #fda12e 0%, #ffcc64 100%);
284
    background: -moz-linear-gradient(center top, #fda12e 0%, #ffcc64 100%);
285
    background: -o-linear-gradient(center top, #fda12e 0%, #ffcc64 100%);
286
    background: linear-gradient(center top, #fda12e 0%, #ffcc64 100%);
287
    background: -moz-gradient(center top, #fda12e 0%, #ffcc64 100%);
288
    background: -webkit-linear-gradient(#fda12e 0%, #ffcc64 100%);
289
    background: -moz-linear-gradient(#fda12e 0%, #ffcc64 100%);
290
    background: -o-linear-gradient(#fda12e 0%, #ffcc64 100%);
291
    background: linear-gradient(#fda12e 0%, #ffcc64 100%);
292
}
293
.browser .tab {
294
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e7e6e6));
295
    /*linear-gradient*/
296
    background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#e7e6e6));
297
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -webkit-linear-gradient(#f9f9f9, #e7e6e6);
298
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -moz-linear-gradient(#f9f9f9, #e7e6e6);
299
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -o-linear-gradient(#f9f9f9, #e7e6e6);
300
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, linear-gradient(#f9f9f9, #e7e6e6);
301
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -webkit-linear-gradient(center top, #f9f9f9 0%, #e7e6e6 100%);
302
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -moz-linear-gradient(center top, #f9f9f9 0%, #e7e6e6 100%);
303
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -o-linear-gradient(center top, #f9f9f9 0%, #e7e6e6 100%);
304
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, linear-gradient(center top, #f9f9f9 0%, #e7e6e6 100%);
305
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -moz-gradient(center top, #f9f9f9 0%, #e7e6e6 100%);
306
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -webkit-linear-gradient(#f9f9f9 0%, #e7e6e6 100%);
307
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -moz-linear-gradient(#f9f9f9 0%, #e7e6e6 100%);
308
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, -o-linear-gradient(#f9f9f9 0%, #e7e6e6 100%);
309
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) left top no-repeat, url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) right -56px no-repeat, linear-gradient(#f9f9f9 0%, #e7e6e6 100%);
310
    white-space: nowrap;
311
    overflow: hidden;
312
    text-overflow: ellipsis;
313
    position: relative;
314
    top: 11px;
315
    height: 24px;
316
    width: 169px;
317
    padding: 2px 26px 0 20px;
318
    display: block;
319
    float: left;
320
    color: #111;
321
    font-size: 11px;
322
}
323
.browser .tab:after {
324
    content: '';
325
    display: block;
326
    height: 1px;
327
    left: 14px;
328
    right: 14px;
329
    top: 0;
330
    position: absolute;
331
    border-top: 1px solid #9f9f9f;
332
}
333
.browser .tab img {
334
    position: relative;
335
    top: 3px;
336
}
337
.browser .url {
338
    /*background-clip*/
339
    -webkit-background-clip: padding-box;
340
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
341
    /*@@prefixmycss->No equivalent*/
342
    : ;
343
    /*border-radius*/
344
    -webkit-border-radius: 4px;
345
    -moz-border-radius: 4px;
346
    border-radius: 4px;
347
    /*box-shadow*/
348
    -webkit-box-shadow: inset 1px 1px 0 #f2f2f2, 0 1px 0 rgba(255, 255, 255, 0.8);
349
    -moz-box-shadow: inset 1px 1px 0 #f2f2f2, 0 1px 0 rgba(255, 255, 255, 0.8);
350
    box-shadow: inset 1px 1px 0 #f2f2f2, 0 1px 0 rgba(255, 255, 255, 0.8);
351
    background: url(http://cssdeck.com/uploads/media/posts/9/9oO3s5u.png) 5px -108px no-repeat white;
352
    border: 1px solid rgba(0, 0, 0, 0.25);
353
    display: block;
354
    padding: 5px 4px 5px 27px;
355
    color: #b8b8b8;
356
    line-height: 1;
357
}
358
.links {
359
    text-align: center;
360
    margin-top: 30px;
361
}
362
.links a { color: #6cbbbc }
363
.links .button {
364
    background: #6cbbbc;
365
    font-weight: bold;
366
    display: inline-block;
367
    /*background-clip*/
368
    -webkit-background-clip: padding-box;
369
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
370
    /*@@prefixmycss->No equivalent*/
371
    : ;
372
    /*border-radius*/
373
    -webkit-border-radius: 4px;
374
    -moz-border-radius: 4px;
375
    border-radius: 4px;
376
    color: #fff;
377
    text-decoration: none;
378
    padding: 10px 20px;
379
    margin-bottom: 10px;
380
}
381
.links .button:hover { background: #4da7a8 }
382
/* Display text on the window */
383
.url span:after {
384
    content: " is not accessible for the moment, try later.";
385
    color: #FFF;
386
}
387
.url:focus > span {
388
    color: #000;
389
    position: absolute;
390
    text-shadow: 0px 60px 2px #686868;
391
    z-index: 200;
392
}
393
/* Show picto's on the orbs */
394
.orb a:hover,
395
#btn a:hover {
396
    color: #000;
397
    font-weight: bold;
398
}
399
.orb.red:active>.cl {
400
    background: #f2f2f2;
401
    width: 90000px;
402
    height: 900000px;
403
    position: fixed;
404
    top: 0px;
405
    left: 0px;
406
}
407
.orb.yellow:active>.cl {
408
    background: #f2f2f2;
409
    width: 90000px;
410
    height: 900000px;
411
    position: fixed;
412
    top: 0px;
413
    left: 0px;
414
    z-index: 99999999;
415
}
416
.orb.green:active  .window {
417
    background: #AAAAAA;
418
    width: 90000px;
419
    height: 900000px;
420
    position: fixed;
421
    top: 0px;
422
    left: 0px;
423
    z-index: 99999999;
424
}
425
/* Little box displayed with the orbs (here is the green one)*/
426
.lb {
427
    position: absolute;
428
    bottom: 0;
429
    right: 20px;
430
    left:0;
431
    display: none;
432
    z-index: 999;
433
    background:url(http://lab.web-gate.fr/images/apple.jpg);
434
    /*animation-duration*/
435
    -webkit-animation-duration: 1s;
436
    -moz-animation-duration: 1s;
437
    -ms-animation-duration: 1s;
438
    -o-animation-duration: 1s;
439
    animation-duration: 1s;
440
    /*animation-name*/
441
    -webkit-animation-name: grow;
442
    -moz-animation-name: grow;
443
    -ms-animation-name: grow;
444
    -o-animation-name: grow;
445
    animation-name: grow;
446
    /*animation-iteration-count*/
447
    -webkit-animation-iteration-count: 1;
448
    -moz-animation-iteration-count: 1;
449
    -ms-animation-iteration-count: 1;
450
    -o-animation-iteration-count: 1;
451
    animation-iteration-count: 1;
452
    /*animation-direction*/
453
    -webkit-animation-direction: normal;
454
    -moz-animation-direction: normal;
455
    -ms-animation-direction: normal;
456
    -o-animation-direction: normal;
457
    animation-direction: normal;
458
}
459
/* Little box displayed with the orbs (here is the red one)*/
460
.nb {
461
    position: absolute;
462
    top: 0;
463
    left:0;
464
    display: none;
465
    z-index: 999;
466
    background:url(http://lab.web-gate.fr/images/apple.jpg);
467
    /*animation-duration*/
468
    -webkit-animation-duration: 1s;
469
    -moz-animation-duration: 1s;
470
    -ms-animation-duration: 1s;
471
    -o-animation-duration: 1s;
472
    animation-duration: 1s;
473
    /*animation-name*/
474
    -webkit-animation-name: grow;
475
    -moz-animation-name: grow;
476
    -ms-animation-name: grow;
477
    -o-animation-name: grow;
478
    animation-name: grow;
479
    /*animation-iteration-count*/
480
    -webkit-animation-iteration-count: 1;
481
    -moz-animation-iteration-count: 1;
482
    -ms-animation-iteration-count: 1;
483
    -o-animation-iteration-count: 1;
484
    animation-iteration-count: 1;
485
    /*animation-direction*/
486
    -webkit-animation-direction: normal;
487
    -moz-animation-direction: normal;
488
    -ms-animation-direction: normal;
489
    -o-animation-direction: normal;
490
    animation-direction: normal;
491
}
492
/* Following lines target the two differents little windows */
493
.lb:target {
494
    display: block;
495
    width: 100%;
496
    height: 100%;
497
}
498
.nb:target {
499
    display: block;
500
    width: 100%;
501
    height: 100%;
502
}
503
/*
504
.lb:focus #cl{display:none;}
505
.nb:focus #cl{display:none;}
506
 and theses are needed to resize the browser */
507
#br:target {
508
    display: block;
509
    width: 100%;
510
}
511
#btn #br:target {
512
    display: block;
513
    width: 650px;
514
    height: 100%;
515
}
516
#btn {
517
    background: #7dbb5d;
518
    background: -webkit-gradient(linear, left top, left bottom, from(#7dbb5d), to(#afdb92));
519
    /*linear-gradient*/
520
    background: -webkit-gradient(linear,left top,left bottom,from(#7dbb5d),to(#afdb92));
521
    background: -webkit-linear-gradient(#7dbb5d, #afdb92);
522
    background: -moz-linear-gradient(#7dbb5d, #afdb92);
523
    background: -o-linear-gradient(#7dbb5d, #afdb92);
524
    background: linear-gradient(#7dbb5d, #afdb92);
525
    background: -webkit-linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
526
    background: -moz-linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
527
    background: -o-linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
528
    background: linear-gradient(center top, #7dbb5d 0%, #afdb92 100%);
529
    background: -moz-gradient(center top, #7dbb5d 0%, #afdb92 100%);
530
    background: -webkit-linear-gradient(#7dbb5d 0%, #afdb92 100%);
531
    background: -moz-linear-gradient(#7dbb5d 0%, #afdb92 100%);
532
    background: -o-linear-gradient(#7dbb5d 0%, #afdb92 100%);
533
    background: linear-gradient(#7dbb5d 0%, #afdb92 100%);
534
    /*box-shadow*/
535
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.7);
536
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.7);
537
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.7);
538
    /*background-clip*/
539
    -webkit-background-clip: padding-box;
540
    -moz-background-clip: /*@@prefixmycss->No equivalent*/; background-clip:padding-box;
541
    /*@@prefixmycss->No equivalent*/
542
    : ;
543
    /*border-radius*/
544
    -webkit-border-radius: 30px;
545
    -moz-border-radius: 30px;
546
    border-radius: 30px;
547
    float: left;
548
    margin: 13px 8px 0 0;
549
    width: 12px;
550
    height: 12px;
551
    position: relative;
552
    left: 60px;
553
    top: 0px;
554
    overflow: hidden;
555
    color: transparent;
556
    font-size: 10px;
557
    text-align: center;
558
    text-decoration: none;
559
    z-index: 200;
560
    display: none;
561
}
562
#br:target > #btn { display: block }
563
#btn:target:before:focus > #br { width: 650px }
564
/* theses line are here to stylize the little windows */
565
#plop {
566
    display: block;
567
    position: absolute;
568
    bottom: 10px;
569
    right: 20px;
570
    padding: 20px;
571
    padding-top: 0px;
572
    padding-left: 4px;
573
    padding-right: 4px;
574
    background: #ccc;
575
    /*border-radius*/
576
    -webkit-border-radius: 5px;
577
    -moz-border-radius: 5px;
578
    border-radius: 5px;
579
    width: 90px;
580
    height: 70px;
581
    border: 1px solid #999999;
582
}
583
#plop p {
584
    height: auto;
585
    background: #ffffff;
586
    /*linear-gradient*/
587
    background: -webkit-linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
588
    background: -moz-linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
589
    background: -o-linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
590
    background: linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
591
    background: -webkit-linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
592
    background: -moz-linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
593
    background: -o-linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
594
    background: linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
595
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
596
    /*border-radius*/
597
    -webkit-border-radius: 3px;
598
    -moz-border-radius: 3px;
599
    border-radius: 3px;
600
    margin-top: 5px;
601
    font-size: 15px;
602
    width: 90px;
603
}
604
#plopnew {
605
    position: absolute;
606
    bottom: 0px;
607
    right: 40px;
608
    padding: 20px;
609
    padding-top: 0px;
610
    padding-left: 4px;
611
    padding-right: 4px;
612
    background: #ccc;
613
    /*border-radius*/
614
    -webkit-border-radius: 5px;
615
    -moz-border-radius: 5px;
616
    border-radius: 5px;
617
    width: 90px;
618
    height: 70px;
619
    border: 1px solid #999999;
620
    overflow: hidden;
621
}
622
#plopnew p {
623
    height: auto;
624
    background:url(http://lab.web-gate.fr/images/apple.jpg);
625
    /*linear-gradient*/
626
    background: -webkit-linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
627
    background: -moz-linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
628
    background: -o-linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
629
    background: linear-gradient(top, hsl(0,0%,100%) 0%, hsl(0,0%,95%) 50%, hsl(0,0%,88%) 51%, hsl(0,0%,96%) 100%);
630
    background: -webkit-linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
631
    background: -moz-linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
632
    background: -o-linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
633
    background: linear-gradient(top, hsl(0,0%,100%) 0%,hsl(0,0%,95%) 50%,hsl(0,0%,88%) 51%,hsl(0,0%,96%) 100%);
634
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
635
    /*border-radius*/
636
    -webkit-border-radius: 3px;
637
    -moz-border-radius: 3px;
638
    border-radius: 3px;
639
    margin-top: 5px;
640
    font-size: 15px;
641
    text-decoration: none;
642
    width: 90px;
643
    height: 80px;
644
    text-align: center;
645
    font-size: 60px;
646
    color: #f2f2f2;
647
    text-shadow: 1px -2px 1px #999;
648
}
649
/* And finally, this part is used to display the 3 pseudo orbs on the little window */
650
#plop span:first-child:after {
651
    color: #f0554d;
652
    content: "●";
653
}
654
#plop span:nth-child(2):after {
655
    color: #fda12e;
656
    content: "●";
657
}
658
#plop span:last-child:after {
659
    color: #7dbb5d;
660
    content: "●";
661
}
662
 
663
#screen{background:#000;padding:10px;font-family:courier;font-size:13px;}
664
#title{
665
text-align:center;
666
margin-left:80px;
667
padding-top:20px;  
668
font-size:14px;  
669
color:#666;
670
text-shadow:-1px 1px épx #999;  
671
}
672
*[candrag="true"] {
673
    position: absolute;
674
    width:100%;
675
    height:100%;
676
    max-width: 100%;
677
    max-height: 100%;
678
    -webkit-resize: none;
679
    -moz-resize:none;
680
    resize:none;
681
    overflow: hidden;
682
 
683
    -webkit-transform-origin: 0 0;
684
    -moz-transform-origin: 0 0;
685
    -o-transform-origin: 0 0;
686
    -ms-transform-origin: 0 0;
687
    transform-origin: 0 0;
688
 
689
    -webkit-transform: scale(1);
690
    -moz-transform: scale(1);
691
    -o-transform: scale(1);
692
    -ms-transform: scale(1);
693
    transform: scale(1);
694
    left: 0;
695
    top: 0;
696
}
697
 
698
 
 

Full CSS3 Terminal window

CSSDeck G+