Реферат: Раздвижные двери CSS
width:100%;
background:#DAE0D2 url("bg.gif")
repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
Для завершения работы над закладкой осталось «просочить» текущую закладку через границу, о чем мы уже говорили выше. Вы можете подумать, что мы применим к нашим закладкам нижнюю границу, совпадающую по цвету с нижней обводкой фонового изображения элемента #header, а затем изменим цвет границы для текущей закладки на белый. Однако это привело бы к появлению крошечной «ступеньки», видимой для внимательного глаза. А вот если мы изменим отступ для ссылок, мы сможем создать четкие и прямые углы внутри текущей закладки, как показано на увеличенном рисунке:
Мы добьемся этого, уменьшив нижний отступ для обычной ссылки на 1 пиксель (5px - 1px = 4px), а затем добавив этот пиксель к текущей ссылке:
#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url("norm_left_on.gif");
padding-bottom:5px;
}
Это изменение делает нижнюю границу видимой сквозь обычные закладки, но прячет ее для текущей закладки. Мы получаем пример 3.
Заключительные шаги
Внимательный взгляд мог заметить в предыдущем примере белые участки по углам закладок. Эти непрозрачные уголки мешают задней картинке быть видимой через левый угол переднего изображения. Теоретически мы могли бы сделать эти уголки такого же цвета как и фон позади них. Но наши закладки могут увеличиться по высоте, и тогда задний градиентный фон сдвинется вниз, что приведет к рассогласованию цвета уголков и фонового градиента. Вместо этого мы изменим наши картинки, сделав их уголки прозрачными. Если к обводке закладок применено сглаживание (anti-aliasing), мы зададим в качестве прозрачного цвета (matte) среднее значение заднего фонового градиента.
Теперь, когда уголки прозрачны, кусочек правого изображения просматривается через прозрачный угол левого. Чтобы избежать этого, добавим небольшой левый отступ к элементу списка, равный ширине левого изображения (9px). Чтобы сохранить центрирование текста после добавления отступа к элементу списка, необходимо убрать такую же величину левого отступа у ссылки (15px - 9px = 6px):
#header li {