Ajax Loader
HTML 
<div id="wrap">
1
<div id="wrap">
2
    <div id="left">
3
      <ul class="list">
4
        <li>Item 1</li>
5
        <li>Item 2</li>
6
        <li>Item 3</li>
7
        <li>Item 4</li>
8
      </ul>
9
    </div>
10
11
    <div id="right">
12
      <select class="select">
13
        <option>Menu</option>
14
        <option>Item</option>
15
      </select>
16
17
      <input type="radio" class="radio">
18
      <input type="radio" class="radio" disabled>
19
      <input type="radio" class="radio" checked>
20
21
      <span id="checkbox">
22
        <input type="checkbox" class="checkbox">
23
        <input type="checkbox" class="checkbox" checked>
24
      </span>
25
26
      <input type="search" placeholder="Search" results="0" class="search">
27
      <input type="text" class="text" placeholder="Text">
28
      <input type="range" min="0" max="10" step="0.1" value="3" class="range">
29
    </div>
30
31
    <div class="clear"></div>
32
33
    <div>
34
      <div class="toolbar">
35
        <input type="search" class="search">
36
        <button class="button">Button</button>
37
      </div>
38
    </div>
39
  </div>
 
CSS 
* {
1
* {
2
  margin: 0;
3
  padding: 0;
4
  border: 0;
5
  outline: 0;
6
  font-size: 1em;
7
  list-style: none;
8
}
9
 
10
div.clear {
11
  clear: both;
12
}
13
 
14
body {
15
  background: rgb(180, 185, 190);
16
  color: 80, 80, 80;
17
  font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
18
  font-size: 11px;
19
}
20
 
21
div#wrap {
22
  margin: 100px auto;
23
  width: 300px;
24
}
25
 
26
div#left {
27
  float: left;
28
}
29
 
30
div#right {
31
  float: right;
32
}
33
 
34
input, select {
35
  margin-bottom: 10px;
36
}
37
 
38
#checkbox {
39
  margin-left: 10px;
40
}
41
 
42
div.toolbar input.search {
43
  width: 210px;
44
  display: inline-block;
45
}
46
 
47
div.toolbar button {
48
  margin-left: 10px;
49
}
50
 
51
/* ui kit */
52
 
53
select.select {
54
  -webkit-appearance: none;
55
  -webkit-box-shadow:
56
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
57
    0 1px 0 rgba(0, 0, 0, 0.2),
58
    0 0 0 1px rgb(150, 150, 150),
59
    0 1px 2px rgba(0, 0, 0, 0.25);
60
  background-position: right center, left top;
61
  background-repeat: no-repeat, repeat-x;
62
  background-image:
63
    url('http://cssdeck.com/uploads/media/items/0/0U97HiE.png'),
64
    -webkit-gradient(
65
      linear,
66
      left top,
67
      left bottom,
68
      from(rgb(240, 240, 240)),
69
      to(rgb(210, 210, 210))
70
    );
71
  border-radius: 3px;
72
  color: rgb(80, 80, 80);
73
  font-size: 11px;
74
  font-weight: bold;
75
  height: 20px;
76
  outline: 0;
77
  padding-left: 6px;
78
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
79
/* for this page only */
80
  width: 140px;
81
  display: block;
82
}
83
 
84
input.radio {
85
  -webkit-appearance: none;
86
  -webkit-box-shadow:
87
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
88
    0 0 0 1px rgb(150, 150, 150),
89
    0 1px 2px rgba(0, 0, 0, 0.25);
90
  background:
91
    -webkit-gradient(
92
      linear,
93
      0% 0%,
94
      0% 100%,
95
      from(rgb(240, 240, 240)),
96
      to(rgb(210, 210, 210))
97
    )
98
    rgb(90, 90, 90);
99
  border-radius: 20px;
100
  height: 10px;
101
  width: 10px;
102
}
103
 
104
input.radio:disabled {
105
  background:
106
    -webkit-gradient(
107
      radial, 50% 50%, 2, 50% 50%, 3, from(rgb(180, 180, 180)), to(rgba(255, 255, 255, 0))
108
    ),
109
    -webkit-gradient(
110
      linear,
111
      0% 0%,
112
      0% 100%,
113
      from(rgb(240, 240, 240)),
114
      to(rgb(210, 210, 210))
115
    )
116
    rgb(90, 90, 90);
117
}
118
 
119
input.radio:checked {
120
  background:
121
    -webkit-gradient(
122
      radial, 50% 50%, 2, 50% 50%, 3, from(rgb(90, 90, 90)), to(rgba(255, 255, 255, 0))
123
    ),
124
    -webkit-gradient(
125
      linear,
126
      0% 0%,
127
      0% 100%,
128
      from(rgb(240, 240, 240)),
129
      to(rgb(210, 210, 210))
130
    )
131
    rgb(90, 90, 90);
132
}
133
 
134
input.checkbox {
135
  -webkit-appearance: none;
136
  -webkit-box-shadow:
137
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
138
    0 0 0 1px rgb(150, 150, 150),
139
    0 1px 2px rgba(0, 0, 0, 0.25);
140
  background:
141
    -webkit-gradient(
142
      linear,
143
      0% 0%,
144
      0% 100%,
145
      from(rgb(240, 240, 240)),
146
      to(rgb(210, 210, 210))
147
    )
148
    rgb(90, 90, 90);
149
  border-radius: 3px;
150
  height: 10px;
151
  width: 10px;
152
}
153
 
154
input.checkbox:checked {
155
  background:
156
    url('http://cssdeck.com/uploads/media/items/1/1S2Ow7G.png') center center no-repeat,
157
    -webkit-gradient(
158
      linear,
159
      0% 0%,
160
      0% 100%,
161
      from(rgb(240, 240, 240)),
162
      to(rgb(210, 210, 210))
163
    )
164
    rgb(90, 90, 90);
165
}
166
 
167
input.search {
168
  -webkit-appearance: none;
169
  -webkit-box-shadow:
170
    0 -1px 0 rgba(0, 0, 0, 0.3),
171
    inset 0 1px 1px rgba(0, 0, 0, 0.2),
172
    0 0 0 1px rgb(140, 140, 140),
173
    0 2px 0 rgba(255, 255, 255, 0.3);
174
  -webkit-transition-property: background-color, color;
175
  -webkit-transition-duration: 0.4s;
176
  background:
177
    -webkit-gradient(
178
      linear,
179
      left top,
180
      left bottom,
181
      from(rgba(0, 0, 0, 0.1)),
182
      to(rgba(0, 0, 0, 0))
183
    )
184
    rgb(245, 245, 245);
185
  border-radius: 20px;
186
  color: rgb(90, 90, 90);
187
  font: 11px/1 'Lucida Grande', sans-serif;
188
  display: block;
189
  height: 20px;
190
/* for this page only */
191
  width: 130px;
192
}
193
 
194
input.search::-webkit-search-results-decoration {
195
  margin-right: 2px;
196
}
197
 
198
input.search::-webkit-search-cancel-button {
199
  margin-left: 4px;
200
}
201
 
202
input.search:focus {
203
  -webkit-box-shadow:
204
    0 0 4px rgb(68, 160, 208),
205
    0 -1px 0 rgba(0, 0, 0, 0.3),
206
    inset 0 1px 1px rgba(0, 0, 0, 0.2),
207
    0 0 0 1px rgb(140, 140, 140),
208
    0 2px 0 rgba(255, 255, 255, 0.3);
209
  background-color: rgb(255, 255, 255);
210
  color: rgb(60, 60, 60);
211
}
212
 
213
input.text {
214
  -webkit-appearance: none;
215
  -webkit-box-shadow:
216
    0 -1px 0 rgba(0, 0, 0, 0.3),
217
    inset 0 1px 1px rgba(0, 0, 0, 0.2),
218
    0 0 0 1px rgb(140, 140, 140),
219
    0 2px 0 rgba(255, 255, 255, 0.3);
220
  -webkit-transition-property: background-color, color;
221
  -webkit-transition-duration: 0.4s;
222
  border-radius: 3px;
223
  font: 11px/1 'Lucida Grande', sans-serif;
224
  color: rgb(90, 90, 90);
225
  height: 20px;
226
  padding: 0 5px;
227
  background:
228
    -webkit-gradient(
229
      linear,
230
      left top,
231
      left bottom,
232
      from(rgba(0, 0, 0, 0.1)),
233
      to(rgba(0, 0, 0, 0))
234
    )
235
    rgb(245, 245, 245);
236
/* for this page only */
237
  width: 120px;
238
  display: block;
239
}
240
 
241
input.text:focus {
242
  -webkit-box-shadow:
243
    0 0 4px rgb(68, 160, 208),
244
    0 -1px 0 rgba(0, 0, 0, 0.3),
245
    inset 0 1px 1px rgba(0, 0, 0, 0.2),
246
    0 0 0 1px rgb(140, 140, 140),
247
    0 2px 0 rgba(255, 255, 255, 0.3);
248
  background-color: rgb(255, 255, 255);
249
  color: rgb(60, 60, 60);
250
}
251
 
252
input.range {
253
  -webkit-appearance: none;
254
  -webkit-box-shadow:
255
    inset 0 0 0 1px rgb(140, 140, 140),
256
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
257
    0 1px 0 rgba(255, 255, 255, 0.3);
258
  background: rgba(0, 0, 0, 0.1);
259
  border-radius: 10px;
260
  height: 4px;
261
/*  */
262
  width: 100px;
263
  display: block;
264
}
265
 
266
input.range::-webkit-slider-thumb {
267
  -webkit-appearance: none;
268
  -webkit-box-shadow:
269
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
270
    0 0 0 1px rgb(140, 140, 140),
271
    0 1px 1px rgba(0, 0, 0, 0.3);
272
  border-radius: 10px;
273
  background-color: rgba(255, 255, 255, 0.7);
274
  background-image:
275
    -webkit-gradient(
276
      radial, 50% 50%, 2, 50% 50%, 3, from(rgb(200, 200, 200)), to(rgba(255, 255, 255, 0))
277
    ),
278
    -webkit-gradient(
279
      linear,
280
      left top,
281
      left bottom,
282
      from(rgb(240, 240, 240)),
283
      to(rgb(210, 210, 210))
284
    );
285
  width: 10px;
286
  height: 10px;
287
}
288
 
289
.button {
290
  -webkit-box-shadow:
291
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
292
    0 1px 0 rgba(0, 0, 0, 0.2),
293
    0 0 0 1px rgb(150, 150, 150),
294
    0 1px 2px rgba(0, 0, 0, 0.25);
295
  border-radius: 3px;
296
  background-color: rgba(255, 255, 255, 0.7);
297
  background-image:
298
    -webkit-gradient(
299
      linear,
300
      left top,
301
      left bottom,
302
      from(rgb(240, 240, 240)),
303
      to(rgb(210, 210, 210))
304
    );
305
  color: rgb(90, 90, 90);
306
  font: 11px/20px 'Lucida Grande', sans-serif;
307
  padding: 0 10px;
308
  text-decoration: none;
309
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
310
}
311
 
312
.button:active {
313
  -webkit-box-shadow:
314
    inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
315
    0 0 0 1px rgb(140, 140, 140),
316
    0 1px 1px rgba(0, 0, 0, 0.3);
317
}
318
 
319
ul.list {
320
  -webkit-box-shadow:
321
    0 1px 0 rgba(0, 0, 0, 0.2),
322
    0 0 0 1px rgb(150, 150, 150),
323
    0 1px 2px rgba(0, 0, 0, 0.25);
324
  background: rgba(255, 255, 255, 0.6);
325
  color: rgb(90, 90, 90);
326
  border-radius: 3px;
327
  width: 140px;
328
}
329
 
330
ul.list li {
331
  -webkit-box-shadow:
332
    0 -1px 0 rgba(0, 0, 0, 0.2),
333
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
334
  background-image:
335
    -webkit-gradient(
336
      linear,
337
      left top,
338
      left bottom,
339
      from(rgb(240, 240, 240)),
340
      to(rgb(210, 210, 210))
341
    );
342
  line-height: 1;
343
  padding: 10px;
344
}
345
 
346
ul.list li:first-child {
347
  border-radius: 3px 3px 0 0;
348
  -webkit-box-shadow: none;
349
}
350
 
351
ul.list li:last-child {
352
  border-radius: 0 0 3px 3px;
353
}
354
 
355
div.toolbar {
356
  -webkit-box-shadow:
357
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
358
    0 1px 0 rgba(0, 0, 0, 0.2),
359
    0 0 0 1px rgb(150, 150, 150),
360
    0 1px 2px rgba(0, 0, 0, 0.25);
361
  background-color: rgba(255, 255, 255, 0.4);
362
  background-image:
363
    -webkit-gradient(
364
      linear,
365
      left top,
366
      left bottom,
367
      from(rgb(220, 220, 220)),
368
      to(rgb(180, 180, 180))
369
    );
370
  border-radius: 3px;
371
  height: 20px;
372
  padding: 10px;
373
/* for this page only */
374
  margin-top: 10px;
375
}
 

Smooth UI Kit (Webkit Only)

CSSDeck G+