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.
185
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.
CLIPPED SLIDING DOORS
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