<p>You can apply gradients to various images, as you wish.
Imagine the nice fade-in effect that you can
generate if you add some scripting to slowly
adjust the opacity value while the user is
watching.</p>
</body>
But when you add the floatproperty, text and other elements wrap around
the floated element. In this next example, the image is floated within both the
parent headline and the text that follows it, as shown in Figure 10-8:
<body>
<h2><img src=”woofie.jpg” style=”float: left; width: 200px;
height: 150px; margin: 0 3% 0;”>Illustrating how a gradient
effect works</h2>
<p>You can apply gradients to various images, as you wish.
Imagine the nice fade-in effect that you can
generate if you add some scripting to slowly
adjust the opacity value while the user is
watching.</p>
</body>
Notice in the above code that the image is an inline element, nested inside
the H2 element. When you nest elements like this, you help ensure that most
browsers align the top margin of the headline text and the image.
Figure 10-7:
Without the
float
property,
many Web
page
designs are
almost
guaranteed
to include
unneces-
sary white
space, like
this.
192 Part III: Adding Artistry: Design and Composition with CSS
