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

Figure 5-26: Corners of unequal radius.

h ere are also properties that let you set each corner individually. h e unprei xed versions are
border-top-right-radius , border-bottom-right-radius , border-bottom-
left-radius , and border-top-left-radius . Each one takes either one or two values:
One value gets you a circular arc, and two values gets you an elliptical. h e slash is only used
on border-radius , and is necessary there to distinguish one result (circular corners of
dif ering sizes) from another (same-size corners that are elliptical).

In fact, the individual-corner properties come in handy if you want to support WebKit. h at's
because while it doesn't support value patterns like 20px 60px , it does support individual
corner properties. So in order to get Figure 5-26 in both Gecko- and WebKit-based browsers,
you'd write:

179

.rounded { background : #FFF ; border : 2px solid #000 ;
-webkit-border-radius : 20px ;
-webkit-border-top-right-radius : 60px ;
-webkit-border-bottom-left-radius : 60px ;
-moz-border-radius : 20px 60px ;
border-radius : 20px 60px ;}

Ugly, but ef ective.

CSS SPRITES
A technique i rst popularized by Dave Shea (of CSS Zen Garden fame) way back in 2004, CSS
sprites are a way of having really fast hover ef ects. h ey've since become a way of reducing
server load by bundling decorative images together into a single download.

h e basic example of a CSS sprite is one that contains two states for an icon—say, one for
normal display next to a link, and a “lit up” version for when the link is hovered. h e image
looks like Figure 5-27.