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