EFFECTS - CSS: Professional Techniques for Modern Layout - page 185

h ere is a small problem, however; the right side of each tab will become unclickable because
the link has moved to the let (look closely at Figure 5-39 to see the plain arrow over the last
tab). So a better way to do this is a little margin trickery. In that case, alter the last rule to read:

ul.nav li a { background : url(tab-clip-left.gif) no-repeat ;
display : block ; padding : 10px 25px 5px ; margin-left : -25px ;}

In this setup, the let edge of each hyperlink is pulled 15 pixels to the let of the let edge of the
list item. h is causes the link to cover up the right margin extending from the preceding list
item, just as with the relative-positioning approach. h is time, though, the link's right edge is
still lined up with the right edge of the list item, instead of being shit ed away from it. So the
tabs work as intended, as the magic pointing hand shows in Figure 5-40, and the clipped
corners let the page background shine through!

Figure 5-40: Fully functioning clipped tabs.

CSS PARALLAX
CSS parallax is a subtle technique that's fun to employ as an Easter Egg on your site, and also
sheds a little light on how simple, straightforward percentage-based background image
positioning can yield unexpected results. (It's also something that's very, very dii cult to
illustrate in print, so you'll dei nitely want to try this one out for yourself.)

187

To start, consider how percentage-based positioning is done. Say you assign a background
image a position of 50% 50% . h at will cause its center to be aligned with the center of the
background area. Similarly, if you assign 100% 100% , then its bottom-right corner will be
aligned with the bottom-right corner of the background area. See Figure 5-41 for an example
of two dif erent image placements.

What that means is that percentage values for background image positioning are actually used
twice. h e i rst time is to i nd the dei ned point in the background area. h e second is to i nd
the dei ned point in the image itself. h e two points are then aligned.

So what happens when the background area's size dynamically changes? Take this rule:

body { background : url(ice-1.png) 75% 0 no-repeat ; width : 100% ;
padding : 0 ; margin : 0 ;}