When you assign dark colors to the right and bottom sides, you produce the
“outset” protruding lighting effect, even though you’re not using the outset
style for your border property. Figure 10-6 illustrates one way to do this:
Although you can add borders to inline elements, avoid that trick. It can look
pretty messy and overdone. Borders aren’t meant for inline elements.
Floating About .............................................................................................
CSS permits any element to float, just as it extends many other properties to
all elements that were in traditional HTML limited to only a few. Designers
were able to flow (or wrap) text around an image or table by using the
align=”right”code in HTML, but now you can pretty much float anything
you wish. Here again, CSS gives designers far greater freedom to design than
was previously possible.
Figure 10-7 illustrates how the following code looks, without using the float
property:
<body>
<h2><img src=”woofie.jpg” style=” width: 200px; height:
150px; margin: 0 3% 0;”>Illustrating how a
gradient effect works</h2>
Figure 10-6:
By
specifying
different
values for
different
sides of this
border, you
get a 3D
lighting
effect,
similar to
the outset
border style.
Chapter 10: Organizing Your Web Pages Visually 191
