Graphics Programs Reference
In-Depth Information
h en the same markup as before gets styled like so:
ul.nav , ul.nav li { margin : 0 ; padding : 0 ; list-style : none ;}
ul.nav li { background : url(tab-bottom.png) no-repeat 0 100% ;}
ul.nav li a { background : url(tab-top.png) no-repeat 0 0 ;
display : block ; padding : 5px 15px ;
font : bold 1em sans-serif ; text-decoration : none ; color : #000 ;
display : block ;}
It will result in the screen shown in Figure 5-36.
Figure 5-36: The horizontally oriented result.
For hover ef ects, the same principles apply: Just use CSS sprites to make them happen.
Looking to the future, some day support for multiple backgrounds will be widespread enough
to combine all the tab pieces on a single element.
One of the drawbacks of the original Sliding Doors technique is that it forces you to include the
“page background” as part of the tabs. h at's okay as long as the background around the tabs is
a single solid color that never changes. But what if you want to put the tabs into dif erent
contexts with changing backgrounds, or even over something like a patterned background?
To accomplish this, you'll need the same basic tab slices as before, only with transparent bits
that are meant to allow the surrounding area to “shine through.” h e images are displayed in
Figure 5-37; for simplicity's sake, just stick to straight tabs and leave of the hover ef ects.
Search WWH ::

Custom Search