Graphics Programs Reference
In-Depth Information
You could of course also do those things with inline CSS, if you were so inclined. h at would
eliminate the need for all the ID'ed rules and indeed the IDs themselves, leaving you with only
.curves div
to retain. On the other hand, you'd have a bunch of CSS cluttering your
markup.
<
div
class="curves">
<
div>
</
div>
<
div
style="width:
42
px;
background-position:
0
-20px;">
</
div>
<
div
style="width:
21
px;
background-position:
0
-40px;">
</
div>
<
div
style="width:
10
px;
background-position:
0
-60px;">
</
div>
<
div
style="width:
5
px;
background-position:
0
-80px;">
</
div>
</
div>
h e choice is yours. Choose wisely.
One more wrinkle on this technique (which would apply as well to the sliced version shown
in the last section) is that you aren't limited to having all your
div
s be the same height. If you
have an area of the curve that's, well, un-curvy, you can stretch the
div
to the proper height.
h at cuts down on the number of elements you need. You can plan for this by drawing out the
l ow boxes (see Figure 5-51) in your image-editing program beforehand.
h e sizes of the boxes can then be copied directly to your document. Figure 5-52 depicts the
end result.
196
<
div
class="curves">
<
div
style="width:
8
px;
height:
40
px;">
</
div>
<
div
style="width:
25
px;
height:
20
px;
background-position:
0
-40px;">
</
div>
<
div
style="width:
50
px;
height:
15
px;
background-position:
0
-60px;">
</
div>
<
div
style="width:
75
px;
height:
15
px;
background-position:
0
-75px;">
</
div>
<
div
style="width:
92
px;
height:
20
px;
background-position:
0
-90px;">
</
div>
<
div
style="width:
97
px;
height:
15
px;
background-position:
0
-110px;">
</
div>
<
div
style="width:
100
px;
height:
50
px;
background-position:
0
-125px;">
</
div>
<
div
style="width:
97
px;
height:
15
px;
background-position:
0
-175px;">
</
div>
<
div
style="width:
92
px;
height:
20
px;
background-position:
0
-190px;">
</
div>
<
div
style="width:
75
px;
height:
15
px;
background-position:
0
-210px;">
</
div>
<
div
style="width:
50
px;
height:
15
px;
background-position:
0
-225px;">
</
div>
<
div
style="width:
25
px;
height:
20
px;
background-position:
0
-240px;">
</
div>
<
div
style="width:
8
px;
height:
40
px;
background-position:
0
-260px;">
</
div>
</
div>
Search WWH ::
Custom Search