Graphics Programs Reference
In-Depth Information
Figure 5-49: The curve image as shown in Photoshop.
At this point, you have everything you need to curve the l ow of text. It just takes some sizing
and background positioning in the CSS (see also Figure 5-50):
.curves
div
{
float
:
left
;
clear
:
left
;
margin-right
:
20px
;
height
:
20px
;
width
:
100px
;
background
:
url(curve.png)
no-repeat
;}
.curves
#sl2
{
width
:
42px
;
background-position
:
0
-20px
;}
.curves
#sl3
{
width
:
21px
;
background-position
:
0
-40px
;}
.curves
#sl4
{
width
:
10px
;
background-position
:
0
-60px
;}
.curves
#sl5
{
width
:
5px
;
background-position
:
0
-80px
;}
195
Figure 5-50: The curve placed into the browser using background positioning on .
Search WWH ::
Custom Search