sexta-feira, 7 de novembro de 2014

Adicionar fragmentos de uma imagem como Style em uma página HTML

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