Ajax Loader
HTML 
<div id="keyboard">
1
<div id="keyboard">
2
      <ul class="cf">
3
          <li><a href="#" class="key c27 fn"><span id="esc">esc</span></a></li>
4
          <li><a href="#" class="key c112 fn"><span>F1</span></a></li>
5
          <li><a href="#" class="key c113 fn"><span>F2</span></a></li>
6
          <li><a href="#" class="key c114 fn"><span>F3</span></a></li>
7
          <li><a href="#" class="key c115 fn"><span>F4</span></a></li>
8
          <li><a href="#" class="key c116 fn"><span>F5</span></a></li>
9
          <li><a href="#" class="key c117 fn"><span>F6</span></a></li>
10
          <li><a href="#" class="key c118 fn"><span>F7</span></a></li>
11
          <li><a href="#" class="key c119 fn"><span>F8</span></a></li>
12
          <li><a href="#" class="key c120 fn"><span>F9</span></a></li>
13
          <li><a href="#" class="key c121 fn"><span>F10</span></a></li>
14
          <li><a href="#" class="key c122 fn"><span>F11</span></a></li>
15
          <li><a href="#" class="key c123 fn"><span>F12</span></a></li>
16
          <li><a href="#" class="key fn"><span>Eject</span></a></li>
17
        </ul>
18
      <ul class="cf" id="numbers">
19
        <li><a href="#" class="key c192"><b>~</b><span>`</span></a></li>
20
        <li><a href="#" class="key c49"><b>!</b><span>1</span></a></li>
21
        <li><a href="#" class="key c50"><b>@</b><span>2</span></a></li>
22
        <li><a href="#" class="key c51"><b>#</b><span>3</span></a></li>
23
        <li><a href="#" class="key c52"><b>$</b><span>4</span></a></li>
24
        <li><a href="#" class="key c53"><b>%</b><span>5</span></a></li>
25
        <li><a href="#" class="key c54"><b>^</b><span>6</span></a></li>
26
        <li><a href="#" class="key c55"><b>&amp;</b><span>7</span></a></li>
27
        <li><a href="#" class="key c56"><b>*</b><span>8</span></a></li>
28
        <li><a href="#" class="key c57"><b>(</b><span>9</span></a></li>
29
        <li><a href="#" class="key c48"><b>)</b><span>0</span></a></li>
30
        <li><a href="#" class="key c189 alt"><b>_</b><span>-</span></a></li>
31
        <li><a href="#" class="key c187"><b>+</b><span>=</span></a></li>
32
        <li><a href="#" class="key c46" id="delete"><span>Delete</span></a></li>
33
        </ul>
34
      <ul class="cf" id="qwerty">
35
        <li><a href="#" class="key c9" id="tab"><span>tab</span></a></li>
36
        <li><a href="#" class="key c81"><span>q</span></a></li>
37
        <li><a href="#" class="key c87"><span>w</span></a></li>
38
        <li><a href="#" class="key c69"><span>e</span></a></li>
39
        <li><a href="#" class="key c82"><span>r</span></a></li>
40
        <li><a href="#" class="key c84"><span>t</span></a></li>
41
        <li><a href="#" class="key c89"><span>y</span></a></li>
42
        <li><a href="#" class="key c85"><span>u</span></a></li>
43
        <li><a href="#" class="key c73"><span>i</span></a></li>
44
        <li><a href="#" class="key c79"><span>o</span></a></li>
45
        <li><a href="#" class="key c80"><span>p</span></a></li>
46
        <li><a href="#" class="key c219 alt"><b>{</b><span>[</span></a></li>
47
        <li><a href="#" class="key c221 alt"><b>}</b><span>]</span></a></li>
48
        <li><a href="#" class="key c220 alt"><b>|</b><span>\</span></a></li>
49
        </ul>
50
        <ul class="cf" id="asdfg">
51
        <li><a href="#" class="key c20 alt" id="caps"><b></b><span>caps lock</span></a></li>
52
        <li><a href="#" class="key c65"><span>a</span></a></li>
53
        <li><a href="#" class="key c83"><span>s</span></a></li>
54
        <li><a href="#" class="key c68"><span>d</span></a></li>
55
        <li><a href="#" class="key c70"><span>f</span></a></li>
56
        <li><a href="#" class="key c71"><span>g</span></a></li>
57
        <li><a href="#" class="key c72"><span>h</span></a></li>
58
        <li><a href="#" class="key c74"><span>j</span></a></li>
59
        <li><a href="#" class="key c75"><span>k</span></a></li>
60
        <li><a href="#" class="key c76"><span>l</span></a></li>
61
        <li><a href="#" class="key c186 alt"><b>:</b><span>;</span></a></li>
62
        <li><a href="#" class="key c222 alt"><b>"</b><span>'</span></a></li>
63
        <li><a href="#" class="key c13 alt" id="enter"><span>return</span></a></li>
64
        </ul>
65
        <ul class="cf" id="zxcvb">
66
        <li><a href="#" class="key c16 shiftleft"><span>Shift</span></a></li>
67
        <li><a href="#" class="key c90"><span>z</span></a></li>
68
        <li><a href="#" class="key c88"><span>x</span></a></li>
69
        <li><a href="#" class="key c67"><span>c</span></a></li>
70
        <li><a href="#" class="key c86"><span>v</span></a></li>
71
        <li><a href="#" class="key c66"><span>b</span></a></li>
72
        <li><a href="#" class="key c78"><span>n</span></a></li>
73
        <li><a href="#" class="key c77"><span>m</span></a></li>
74
        <li><a href="#" class="key c188 alt"><b>&lt;</b><span>,</span></a></li>
75
        <li><a href="#" class="key c190 alt"><b>&gt;</b><span>.</span></a></li>
76
        <li><a href="#" class="key c191 alt"><b>?</b><span>/</span></a></li>
77
        <li><a href="#" class="key c16 shiftright"><span>Shift</span></a></li>
78
        </ul>
79
    <ul class="cf" id="bottomrow">
80
        <li><a href="#" class="key" id="fn"><span>fn</span></a></li>
81
        <li><a href="#" class="key c17" id="control"><span>control</span></a></li>
82
        <li><a href="#" class="key option" id="optionleft"><span>option</span></a></li>
83
        <li><a href="#" class="key command" id="commandleft"><span>command</span></a></li>
84
        <li><a href="#" class="key c32" id="spacebar"></a></li>
85
        <li><a href="#" class="key command" id="commandright"><span>command</span></a></li>
86
        <li><a href="#" class="key option" id="optionright"><span>option</span></a></li>
87
            <ol class="cf">
88
              <li><a href="#" class="key c37" id="left"><span></span></a></li>
89
                <li>
90
                  <a href="#" class="key c38" id="up"><span></span></a>
91
                  <a href="#" class="key c40" id="down"><span></span></a>
92
                </li>
93
              <li><a href="#" class="key c39" id="right"><span></span></a></li>
94
            </ol>
95
        </ul>
96
    </div>
 
CSS 
body {background: #eee;}
1
body {background: #eee;}
2
 
3
#keyboard {
4
  margin: 15px auto 0;
5
  width: 794px;
6
  height: 315px;
7
  background: #d5d9dc  url('keyboard-background.jpg') repeat-x;
8
  -moz-border-radius-topleft: 7px 21px;
9
  -moz-border-radius-topright: 7px 21px;
10
  -moz-border-radius-bottomright: 10px;
11
  -moz-border-radius-bottomleft: 10px;
12
  border-top-left-radius: 7px 21px;
13
  border-top-right-radius: 7px 21px;
14
  border-bottom-right-radius: 10px;
15
  border-bottom-left-radius: 10px;
16
  padding: 50px 0 0 10px;
17
  -webkit-box-shadow:
18
    inset 0 0 8px #bbb,
19
    0 1px 0 #aaa,
20
    0 4px 0 #bbb,
21
    0 10px 30px #ddd;
22
  -moz-box-shadow:
23
    inset 0 0 8px #bbb,
24
    0 1px 0 #aaa,
25
    0 4px 0 #bbb,
26
    0 10px 30px #ddd;
27
  box-shadow:
28
    inset 0 0 8px #bbb,
29
    0 1px 0 #aaa,
30
    0 4px 0 #bbb,
31
    0 10px 30px #ddd;}
32
 
33
ul {list-style-type: none; width: 784px; margin: 0 auto;}
34
li {float: left;}
35
 
36
 
37
.key{
38
  display: block;
39
  color: #aaa;
40
  font: bold 9pt arial;
41
  text-decoration: none;
42
  text-align: center;
43
  width: 44px;
44
  height: 41px;
45
  margin: 5px;
46
  background: #eff0f2;
47
  -moz-border-radius: 4px;
48
  border-radius: 4px;
49
  border-top: 1px solid #f5f5f5;
50
  -webkit-box-shadow:
51
    inset 0 0 25px #e8e8e8,
52
    0 1px 0 #c3c3c3,
53
    0 2px 0 #c9c9c9,
54
    0 2px 3px #333;
55
  -moz-box-shadow:
56
    inset 0 0 25px #e8e8e8,
57
    0 1px 0 #c3c3c3,
58
    0 2px 0 #c9c9c9,
59
    0 2px 3px #333;
60
  box-shadow:
61
    inset 0 0 25px #e8e8e8,
62
    0 1px 0 #c3c3c3,
63
    0 2px 0 #c9c9c9,
64
    0 2px 3px #333;
65
  text-shadow: 0px 1px 0px #f5f5f5;}
66
 
67
.key:active, .keydown {
68
  color: #888;
69
  background: #ebeced;
70
  margin: 7px 5px 3px;
71
  -webkit-box-shadow:
72
    inset 0 0 25px #ddd,
73
    0 0 3px #333;
74
  -moz-box-shadow:
75
    inset 0 0 25px #ddd,
76
    0 0 3px #333;
77
  box-shadow:
78
    inset 0 0 25px #ddd,
79
    0 0 3px #333;
80
  border-top: 1px solid #eee;}
81
82
.fn span {
83
  display: block;
84
  margin: 14px 5px 0 0;
85
  text-align: right;
86
  font: bold 6pt arial;
87
  text-transform: uppercase;}
88
#esc {
89
  margin: 6px 15px 0 0;
90
  font-size: 7.5pt;
91
  text-transform: lowercase;}
92
 
93
 
94
#numbers li a span {
95
  display: block;}
96
97
#numbers li a b {
98
  margin: 3px 0 3px;
99
  display: block;}
100
 
101
#numbers li .alt b {display: block;margin: 0 0 3px;}
102
 
103
#numbers li #delete span {
104
  text-align: right;
105
  margin: 23px 10px 0 0;
106
  font-size: 7.5pt;
107
  text-transform: lowercase;}
108
109
#qwerty li a span {
110
  display: block;
111
  margin: 13px 0 0;
112
  text-transform: uppercase;}
113
114
#qwerty li #tab span {
115
  text-align: left;
116
  margin: 23px 0 0 10px;
117
  font-size: 7.5pt;
118
  text-transform: lowercase;}
119
 
120
#qwerty li .alt b {display: block; margin: 3px 0 0;}
121
#qwerty li .alt span {margin: 2px 0 0;}
122
 
123
 
124
#asdfg li a span {
125
  display: block;
126
  margin: 13px 0 0;
127
  text-transform: uppercase;}
128
 
129
#asdfg li .alt span {margin: 0; text-transform: lowercase;}
130
#asdfg li .alt b {display: block; margin: 3px 0 0;}
131
#asdfg li #caps b {
132
  display: block;
133
  background: #999;
134
  width: 4px;
135
  height: 4px;
136
  border-radius: 10px;
137
  margin: 9px 0 0 10px;
138
  -webkit-box-shadow: inset 0 1px 0 #666;
139
  -moz-box-shadow:inset 0 1px 0 #666;
140
  box-shadow:inset 0 1px 0 #666;}
141
#asdfg li #caps span {
142
  text-align: left;
143
  margin: 10px 0 0 10px;
144
  font-size: 7.5pt;}
145
#asdfg li #enter span {
146
  text-align: right;
147
  margin: 23px 10px 0 0;
148
  font-size: 7.5pt;}
149
 
150
 
151
#zxcvb li a span {
152
  display: block;
153
  margin: 13px 0 0;
154
  text-transform: uppercase;}
155
#zxcvb li .shiftleft span {
156
  text-align: left;
157
  margin: 23px 0 0 10px;
158
  font-size: 7.5pt;
159
  text-transform: lowercase;}
160
#zxcvb li .shiftright span {
161
  text-align: right;
162
  margin: 23px 10px 0 0;
163
  font-size: 7.5pt;
164
  text-transform: lowercase;}
165
#zxcvb li .alt b {display: block;margin: 4px 0 0;}
166
#zxcvb li .alt span {margin: 0;}
167
 
168
169
#bottomrow li #fn span, #bottomrow li #control span, #bottomrow li #optionleft span, #bottomrow li #commandleft span {
170
  display: block;
171
  text-align: left;
172
  margin: 31px 0 0 8px;
173
  font-size: 7.5pt;
174
  text-transform: lowercase;}
175
 
176
#bottomrow li #optionright span, #bottomrow li #commandright span {
177
  display: block;
178
  text-align: right;
179
  margin: 31px 8px 0 0;
180
  font-size: 7.5pt;
181
  text-transform: lowercase;}
182
 
183
#bottomrow ol li #left span, #bottomrow ol li #right span, #bottomrow ol li #up span, #bottomrow ol li #down span {
184
  display: block;
185
  margin: 9px 0 0;}
186
 
187
.fn {height: 26px; width: 46px;}
188
#delete {width: 72px;}
189
#tab {width: 72px;}
190
#caps {width: 85px;}
191
#enter {width: 85px;}
192
.shiftleft, .shiftright {width: 112px;}
193
#fn, #control, .option, .command, #spacebar {height: 49px;}
194
 
195
#control {width: 56px;}
196
.option {width: 46px;}
197
.command {width: 67px;}
198
#spacebar {width: 226px;}
199
 
200
#left img, #up img, #down img, #right img {border: none;}
201
ul ol {list-style-type: none;}
202
#down {height: 23px;}
203
#up, #left, #right {height: 24px;}
204
#left, #right {margin: 30px 5px 5px;}
205
#left:active, #right:active {margin: 32px 5px 3px;}
206
#up {margin: 5px 5px 1px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
207
#up:active {margin: 8px 5px -2px;}
208
#down {margin: 0 5px 5px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
209
#down:Active {margin: 3px 5px 4px;}
210
#main {
211
  width: 700px;
212
  padding: 20px 50px;
213
  margin: 0 auto 50px;
214
  background: #fff;
215
  border-radius: 5px;
216
  -webkit-box-shadow: 0 1px 2px #aaa;}
217
218
h1 {
219
  color: #888;
220
  text-align: center;
221
  font: bold 25pt/25pt arial;
222
  margin: 30px 0 60px;}
223
224
h2 {
225
  color: #666;
226
  font: 13pt/0pt arial;}
227
228
p {
229
  color: #999;
230
  font: 9pt/17pt arial;
231
  margin: 0 0 50px;}
232
233
small {
234
  font: italic 8pt/12pt arial;
235
  color: #aaa;
236
  padding: 0 130px 0 0;
237
  display: block;}
238
239
cite {
240
  display: block;
241
  padding: 0 0 30px;
242
  margin: 0 auto;
243
  text-align: center;
244
  color: #999;
245
  font: italic bold 8pt arial;}
246
 
247
ul, ol {padding: 0px; margin: 0;}
248
249
/* Micro Clearfix by Nicolas Gallagher - http://nicolasgallagher.com/micro-clearfix-hack */
250
        /* For modern browsers */
251
        .cf:before, .cf:after {content:""; display:table;}
252
        .cf:after {clear:both;}
253
 
254
        /* For IE 6/7 (trigger hasLayout) */
255
        .cf {zoom:1;}
 

Apple Keyboard via CSS3

CSSDeck G+