upside down and see what happens to your perception of the frame in Figure
6-7. Instead of seeming to be inset, doesn’t it now appear to be outset? Don’t
kid yourself: If you weren’t prejudiced to think of light coming from the top
left, you would just as likely see this upside down frame as inset — even with
the light coming from down low and to the right of the frame.
Try changing the preceding CSS style code from inset to outset, and then
reload the page into IE to see the effect:
img {
border-right: silver outset; border-left: silver outset;
border-top: silver outset;border-bottom: silver outset;
border-width:12px;}
The outset effect, which looks as if the frame protrudes toward the viewer, is
shown in Figure 6-9. Notice that the shadows and highlights are different here
compared to the inset style in Figure 6-8.
Other CSS border styles you can experiment with in addition to insetand
outsetinclude grooveand ridge.
CSS offers many significant improvements on traditional Web design facilities
and is far better than classic HTML. With CSS, you can do many things that are
visually impressive, as you see in various examples in this book. But don’t
burden CSS with allyour graphics effects. For example, if you want to build a
background that creates a particular texture, you can sometimes accomplish
it by superimposing image files, repeating patterns, and resorting to other CSS
tricks. But for heaven’s sake, before trying to get some special effect via CSS,
first ask yourself: Can this effect be achieved in a graphics program more
easily, or with a better result? Often the answer is yes. Don’t try to force CSS
to do things it’s not very good at; graphics programs contain many special
tools for creating visual effects. Always ask, “Can Photoshop do this better?”
Take a look at the frame in Figure 6-10. A graphics program can do lots of
things like this. CSS can’t.
Figure 6-9:
The outset
effect looks
as if the
frame
protrudes
toward the
viewer.
122 Part II: Looking Good with CSS
