Ajax Loader
HTML 
<!-- Let's create a nice pixel art using CSS3 box-shadows. There will a be a lot of comma separated values in the box-shadow property but you'll see the drawing in the output just fine, pixel to pixel. We'll use just one element and then use it's box-shadows to generate the other pixels. Let's get started! -->
1
<!-- Let's create a nice pixel art using CSS3 box-shadows. There will a be a lot of comma separated values in the box-shadow property but you'll see the drawing in the output just fine, pixel to pixel. We'll use just one element and then use it's box-shadows to generate the other pixels. Let's get started! -->
2
 
3
<div class="char"></div>
 
CSS 
/* For CSS part, we'll define a width and height of the char div. This will be the size of one pixel we want. Also, instead of using "px" units, we'll use "em" and set the font-size to character's one pixel's width/height so that 1em == 1 pixel unit in our case. This will make the calculation and positioning easy */
1
/* For CSS part, we'll define a width and height of the char div. This will be the size of one pixel we want. Also, instead of using "px" units, we'll use "em" and set the font-size to character's one pixel's width/height so that 1em == 1 pixel unit in our case. This will make the calculation and positioning easy */
2
 
3
.char {
4
  width: 6px;
5
  height: 6px;
6
  font-size: 6px;
7
  background: black;
8
  margin: 30px auto;
9
10
  /* I forgot to mention that we are drawing a pixel girl here. So first, we'll draw the outline of the whole figure and then start coloring it. Coloring part will be easy. */
11
12
  box-shadow:
13
14
    /* Face */
15
    -1em 0 black,
16
    1em 0 black,
17
    2em 1em black,
18
    -2em 1em black,
19
    3em 2em black,
20
    -3em 2em black,
21
    4em 3em black,
22
    -4em 3em black,
23
    4em 4em black,
24
    -4em 4em black,
25
    4em 5em black,
26
    -4em 5em black,
27
    4em 6em black,
28
    -4em 6em black,
29
    4em 7em black,
30
    -4em 7em black,
31
    3em 8em black,
32
    -3em 8em black,
33
    2em 9em black,
34
    -2em 9em black,
35
    1em 10em black,
36
    -1em 10em black,
37
38
    /* Eyes */
39
    -1em 3em black,
40
    -1em 4em black,
41
    1em 3em black,
42
    1em 4em black,
43
44
    /* Smile */
45
    -2em 6em black,
46
    2em 6em black,
47
    -1em 7em black,
48
    0em 7em black,
49
    1em 7em black,
50
51
    /* Face is complete, now we'll move onto the hair */
52
    -2em -3em black,
53
    -1em -3em black,
54
    0em -3em black,
55
    1em -3em black,
56
    2em -3em black,
57
    -3em -2em black,
58
    3em -2em black,
59
    4em -1em black,
60
    -4em -1em black,
61
    -5em 0 black,
62
    -5em 1em black,
63
    5em 0 black,
64
    5em 1em black,
65
    6em 7em black,
66
    6em 2em black,
67
    6em 3em black,
68
    6em 4em black,
69
    6em 5em black,
70
    6em 6em black,
71
    -6em 7em black,
72
    -6em 2em black,
73
    -6em 3em black,
74
    -6em 4em black,
75
    -6em 5em black,
76
    -6em 6em black,
77
    7em 8em black,
78
    7em 9em black,
79
    7em 10em black,
80
    7em 11em black,
81
    7em 12em black,
82
    7em 13em black,
83
    -7em 8em black,
84
    -7em 9em black,
85
    -7em 10em black,
86
    -7em 11em black,
87
    -7em 12em black,
88
    -7em 13em black,
89
90
    /* Now, the torso */
91
    1em 11em black,
92
    -1em 11em black,
93
    2em 11em black,
94
    -2em 11em black,
95
    3em 11em black,
96
    -3em 11em black,
97
    -4em 12em black,
98
    4em 12em black,
99
    -5em 13em black,
100
    5em 13em black,
101
    -6em 14em black,
102
    -6em 15em black,
103
    -6em 16em black,
104
    6em 14em black,
105
    6em 15em black,
106
    6em 16em black,
107
108
    /* Topper */
109
    -4em 16em black,
110
    4em 16em black,
111
    -3em 17em black,
112
    -3em 18em black,
113
    -3em 19em black,
114
    -3em 20em black,
115
    -3em 21em black,
116
    -3em 22em black,
117
    -3em 23em black,
118
    -3em 24em black,
119
    -3em 25em black,
120
    3em 17em black,
121
    3em 18em black,
122
    3em 19em black,
123
    3em 20em black,
124
    3em 21em black,
125
    3em 22em black,
126
    3em 23em black,
127
    3em 24em black,
128
    3em 25em black,
129
    2em 25em black,
130
    1em 25em black,
131
    0 25em black,
132
    -1em 25em black,
133
    -2em 25em black,
134
135
    /* Hands */
136
    -5em 17em black,
137
    -5em 18em black,
138
    -5em 19em black,
139
    -5em 20em black,
140
    -5em 21em black,
141
    -5em 22em black,
142
    -5em 23em black,
143
    -5em 24em black,
144
    -5em 25em black,
145
    5em 17em black,
146
    5em 18em black,
147
    5em 19em black,
148
    5em 20em black,
149
    5em 21em black,
150
    5em 22em black,
151
    5em 23em black,
152
    5em 24em black,
153
    5em 25em black,
154
    4em 26em black,
155
    -4em 26em black,
156
157
    /* Now only pants and shoes left :D */
158
    /* Pants */
159
    3em 26em black,
160
    3em 27em black,
161
    3em 28em black,
162
    3em 29em black,
163
    3em 30em black,
164
    3em 31em black,
165
    3em 32em black,
166
    3em 33em black,
167
    -3em 26em black,
168
    -3em 27em black,
169
    -3em 28em black,
170
    -3em 29em black,
171
    -3em 30em black,
172
    -3em 31em black,
173
    -3em 32em black,
174
    -3em 33em black,
175
    4em 34em black,
176
    4em 35em black,
177
    4em 36em black,
178
    4em 37em black,
179
    4em 38em black,
180
    4em 39em black,
181
    -4em 34em black,
182
    -4em 35em black,
183
    -4em 36em black,
184
    -4em 37em black,
185
    -4em 38em black,
186
    -4em 39em black,
187
188
    0 26em black,
189
    0 30em black,
190
    0 31em black,
191
    0 32em black,
192
    0 33em black,
193
    0 34em black,
194
    0 35em black,
195
    0 36em black,
196
    0 37em black,
197
    0 38em black,
198
    0 39em black,
199
200
    /* Shoes */
201
    -5em 40em black,
202
    -4em 40em black,
203
    -3em 40em black,
204
    -2em 40em black,
205
    -1em 40em black,
206
    0 40em black,
207
    1em 40em black,
208
    2em 40em black,
209
    3em 40em black,
210
    4em 40em black,
211
    5em 40em black,
212
    -6em 41em black,
213
    -6em 42em black,
214
    6em 41em black,
215
    6em 42em black,
216
    -5em 43em black,
217
    -4em 43em black,
218
    -3em 43em black,
219
    -2em 43em black,
220
    -1em 43em black,
221
    1em 43em black,
222
    2em 43em black,
223
    3em 43em black,
224
    4em 43em black,
225
    5em 43em black,
226
    0 41em black,
227
    0 42em black,
228
229
    /* Outlines are completed, now we'll color the character. For coloring, we will use size/spread parameter (4th parameter) of the box-shadow property to make our code comparitively smaller */
230
231
    /* Face */
232
    0 5em 0 3em #FFF5C9,
233
    0 1em 0 1em #FFF5C9,
234
    0 8em 0 1em #FFF5C9,
235
    0 10em #FFF5C9,
236
    0 11em #FFF5C9,
237
    0 12em #FFF5C9,
238
239
    /* Shirt */
240
    0 15em 0 3em purple,
241
    0 21em 0 3em purple,
242
    4em 14em 0 1em purple,
243
    -4em 14em 0 1em purple,
244
    4em 15em 0 1em purple,
245
    -4em 15em 0 1em purple,
246
247
    /* Pants */
248
    0 29em 0 3em red,
249
    0 36em 0 3em red,
250
251
    /* Hands */
252
    0 20em 0 5em #FFF5C9,
253
254
    /* Hair */
255
    0 0 0 2em brown,
256
    -3em 0 0 1em brown,
257
    3em 0 0 1em brown,
258
    4em 3em 0 1em brown,
259
    4em 6em 0 1em brown,
260
    3em 10em 0 3em brown,
261
    -4em 3em 0 1em brown,
262
    -4em 6em 0 1em brown,
263
    -3em 10em 0 3em brown,
264
265
    /* Shoes */
266
    -1em 39em 0 3em pink,
267
    1em 39em 0 3em pink,
268
    -4em 42em 0 1em pink,
269
    4em 42em 0 1em pink
270
}
271
 
272
/* And its completed! I know it might seem to be a bit hard at first but you can make anyone in pixelated form using this trick */
273
/* These are some examples created using the same trick but are more advanced
274
 
275
* http://cssdeck.com/labs/css-boy
276
* http://kuka.vspace.sk/
277
 
278
Thanks for watching! :)
279
*/
280
 
281
 
282
 
283
 
284
 
 

Create a Pixel Character Using CSS3 Box Shadows

CSSDeck G+