Imagem que será usada no exemplo:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .frame
6 {
7 position: relative;
8 }
9
10 .frame_1_1
11 {
12 background: url('Frame.png') -0px -0px;
13 position: absolute;
14 background-repeat: no-repeat;
15 width: 5px;
16 height: 5px;
17 top: 0px;
18 left: 0px;
19 }
20
21 .frame_1_2
22 {
23 background: url('Frame.png') -5px -0px;
24 position: absolute;
25 background-repeat: no-repeat;
26 width: 2px;
27 height: 5px;
28 top: 0px;
29 left: 5px;
30 }
31
32 .frame_1_3
33 {
34 background: url('Frame.png') -7px -0px;
35 position: absolute;
36 background-repeat: repeat-y;
37 width: 19px;
38 height: 5px;
39 top: 0px;
40 left: 7px;
41 }
42
43 .frame_1_4
44 {
45 background: url('Frame.png') -26px -0px;
46 position: absolute;
47 background-repeat: no-repeat;
48 width: 2px;
49 height: 5px;
50 top: 0px;
51 left: 26px;
52 }
53
54 .frame_1_5
55 {
56 background: url('Frame.png') -28px -0px;
57 position: absolute;
58 background-repeat: no-repeat;
59 width: 5px;
60 height: 5px;
61 top: 0px;
62 left: 28px;
63 }
64
65 .frame_2_1
66 {
67 background: url('Frame.png') -0px -5px;
68 position: absolute;
69 background-repeat: no-repeat;
70 width: 5px;
71 height: 26px;
72 top: 5px;
73 left: 0px;
74 }
75
76 .frame_2_2
77 {
78 background: url('Frame.png') -5px -5px;
79 position: absolute;
80 background-repeat: no-repeat;
81 width: 2px;
82 height: 26px;
83 top: 5px;
84 left: 5px;
85 }
86
87 .frame_2_3
88 {
89 background: url('Frame.png') -7px -5px;
90 position: absolute;
91 background-repeat: repeat-y;
92 width: 19px;
93 height: 26px;
94 top: 5px;
95 left: 7px;
96 }
97
98 .frame_2_4
99 {
100 background: url('Frame.png') -26px -5px;
101 position: absolute;
102 background-repeat: no-repeat;
103 width: 2px;
104 height: 26px;
105 top: 5px;
106 left: 26px;
107 }
108
109 .frame_2_5
110 {
111 background: url('Frame.png') -28px -5px;
112 position: absolute;
113 background-repeat: no-repeat;
114 width: 5px;
115 height: 26px;
116 top: 5px;
117 left: 28px;
118 }
119
120 .frame_3_1
121 {
122 background: url('Frame.png') -0px -31px;
123 position: absolute;
124 background-repeat: no-repeat;
125 width: 5px;
126 height: 2px;
127 top: 31px;
128 left: 0px;
129 }
130
131 .frame_3_2
132 {
133 background: url('Frame.png') -5px -31px;
134 position: absolute;
135 background-repeat: no-repeat;
136 width: 2px;
137 height: 2px;
138 top: 31px;
139 left: 5px;
140 }
141
142 .frame_3_3
143 {
144 background: url('Frame.png') -7px -31px;
145 position: absolute;
146 background-repeat: repeat-y;
147 width: 19px;
148 height: 2px;
149 top: 31px;
150 left: 7px;
151 }
152
153 .frame_3_4
154 {
155 background: url('Frame.png') -26px -31px;
156 position: absolute;
157 background-repeat: no-repeat;
158 width: 2px;
159 height: 2px;
160 top: 31px;
161 left: 26px;
162 }
163
164 .frame_3_5
165 {
166 background: url('Frame.png') -28px -31px;
167 position: absolute;
168 background-repeat: no-repeat;
169 width: 5px;
170 height: 2px;
171 top: 31px;
172 left: 28px;
173 }
174
175 .frame_4_1
176 {
177 background: url('Frame.png') -0px -33px;
178 position: absolute;
179 background-repeat: repeat-x;
180 width: 5px;
181 height: 33px;
182 top: 33px;
183 left: 0px;
184 }
185
186 .frame_4_2
187 {
188 background: url('Frame.png') -5px -33px;
189 position: absolute;
190 background-repeat: repeat-x;
191 width: 2px;
192 height: 33px;
193 top: 33px;
194 left: 5px;
195 }
196
197 .frame_4_3
198 {
199 background: url('Frame.png') -7px -33px;
200 position: absolute;
201 background-repeat: repeat;
202 width: 19px;
203 height: 33px;
204 top: 33px;
205 left: 7px;
206 }
207
208 .frame_4_4
209 {
210 background: url('Frame.png') -26px -33px;
211 position: absolute;
212 background-repeat: repeat-x;
213 width: 2px;
214 height: 33px;
215 top: 33px;
216 left: 26px;
217 }
218
219 .frame_4_5
220 {
221 background: url('Frame.png') -28px -33px;
222 position: absolute;
223 background-repeat: repeat-x;
224 width: 5px;
225 height: 33px;
226 top: 33px;
227 left: 28px;
228 }
229
230 .frame_5_1
231 {
232 background: url('Frame.png') -0px -66px;
233 position: absolute;
234 background-repeat: no-repeat;
235 width: 5px;
236 height: 2px;
237 top: 66px;
238 left: 0px;
239 }
240
241 .frame_5_2
242 {
243 background: url('Frame.png') -5px -66px;
244 position: absolute;
245 background-repeat: no-repeat;
246 width: 2px;
247 height: 2px;
248 top: 66px;
249 left: 5px;
250 }
251
252 .frame_5_3
253 {
254 background: url('Frame.png') -7px -66px;
255 position: absolute;
256 background-repeat: repeat-y;
257 width: 19px;
258 height: 2px;
259 top: 66px;
260 left: 7px;
261 }
262
263 .frame_5_4
264 {
265 background: url('Frame.png') -26px -66px;
266 position: absolute;
267 background-repeat: no-repeat;
268 width: 2px;
269 height: 2px;
270 top: 66px;
271 left: 26px;
272 }
273
274 .frame_5_5
275 {
276 background: url('Frame.png') -28px -66px;
277 position: absolute;
278 background-repeat: no-repeat;
279 width: 5px;
280 height: 2px;
281 top: 66px;
282 left: 28px;
283 }
284
285 .frame_6_1
286 {
287 background: url('Frame.png') -0px -68px;
288 position: absolute;
289 background-repeat: no-repeat;
290 width: 5px;
291 height: 5px;
292 top: 68px;
293 left: 0px;
294 }
295
296 .frame_6_2
297 {
298 background: url('Frame.png') -5px -68px;
299 position: absolute;
300 background-repeat: no-repeat;
301 width: 2px;
302 height: 5px;
303 top: 68px;
304 left: 5px;
305 }
306
307 .frame_6_3
308 {
309 background: url('Frame.png') -7px -68px;
310 position: absolute;
311 background-repeat: repeat-y;
312 width: 19px;
313 height: 5px;
314 top: 68px;
315 left: 7px;
316 }
317
318 .frame_6_4
319 {
320 background: url('Frame.png') -26px -68px;
321 position: absolute;
322 background-repeat: no-repeat;
323 width: 2px;
324 height: 5px;
325 top: 68px;
326 left: 26px;
327 }
328
329 .frame_6_5
330 {
331 background: url('Frame.png') -28px -68px;
332 position: absolute;
333 background-repeat: no-repeat;
334 width: 5px;
335 height: 5px;
336 top: 68px;
337 left: 28px;
338 }
339 </style>
340 </head>
341 <body>
342 <div class='frame'>
343 <div class='frame_1_1'></div>
344 <div class='frame_1_2'></div>
345 <div class='frame_1_3'></div>
346 <div class='frame_1_4'></div>
347 <div class='frame_1_5'></div>
348 <div class='frame_2_1'></div>
349 <div class='frame_2_2'></div>
350 <div class='frame_2_3'></div>
351 <div class='frame_2_4'></div>
352 <div class='frame_2_5'></div>
353 <div class='frame_3_1'></div>
354 <div class='frame_3_2'></div>
355 <div class='frame_3_3'></div>
356 <div class='frame_3_4'></div>
357 <div class='frame_3_5'></div>
358 <div class='frame_4_1'></div>
359 <div class='frame_4_2'></div>
360 <div class='frame_4_3'></div>
361 <div class='frame_4_4'></div>
362 <div class='frame_4_5'></div>
363 <div class='frame_5_1'></div>
364 <div class='frame_5_2'></div>
365 <div class='frame_5_3'></div>
366 <div class='frame_5_4'></div>
367 <div class='frame_5_5'></div>
368 <div class='frame_6_1'></div>
369 <div class='frame_6_2'></div>
370 <div class='frame_6_3'></div>
371 <div class='frame_6_4'></div>
372 <div class='frame_6_5'></div>
373 </div>
374 </body>
375 </html>
376
Nenhum comentário:
Postar um comentário