5822-1 (Раздвижные двери CSS)

Раздвижные двери CSS

Douglas Bowman

Среди редко обсуждаемых преимуществ CSS—возможность наложения фоновых изображений с целью получения различных эффектов. В соответствии со стандартом CSS2 для каждого фонового изображения требуется отдельный HTML элемент. В большинстве случаев, типичный код, описывающий общепринятые компоненты интерфейса, предоставляет в наше распоряжение несколько HTML элементов.

Один из таких случаев—навигация на основе закладок. Пришло время вернуть контроль над закладками, популярность которых в качестве основного средства навигации постоянно растет. А теперь благодаря широкой поддержке CSS мы можем улучшить качество и внешний вид закладок на наших сайтах. Вы, скорее всего уже в курсе, что CSS можно использовать для «приручения» простого ненумерованного списка. Возможно, вы даже видели списки с дизайном в виде закладок, которые выглядят примерно так:

А что если бы мы могли взять код в точности из предыдущего примера и превратить закладки в нечто похожее на это:

С помощью несложного CSS это возможно.

В чем новшество?

Многие из встречавшихся мне CSS-закладок (закладки, основанные на CSS) страдают однообразием своего дизайна: цветные прямоугольники, возможно с обводкой, текущая закладка без обводки, цвет меняется для состояния hover. Неужели это все, что CSS может нам предложить? Несколько прямоугольников с одноцветной заливкой?

Перед тем как CSS получил широкое распространение, в навигационном дизайне появилось много новых идей: причудливые формы, искусные переходы цвета, имитирование интерфейсов из реального мира. Такой дизайн, однако, основывался в большой степени на сложных конструкциях из растрированного текста и многократно вложенных таблиц. Редактирование текста или смена последовательности размещения закладок были обременительным делом. Масштабирование текста было невозможным или приводило к серьезным проблемам в композиции страницы.

Навигация из простого текста легка в редактировании и загружается значительно быстрее, нежели навигация на основе растрированного текста. Кроме того, хотя мы и можем добавить атрибут alt для каждого изображения, простой текст, все же, более общедоступен, так как может быть масштабирован. Поэтому неудивительно, что навигация на основе простого текста возвращается в веб-дизайн. Однако внешний вид CSS-закладок до сих пор был шагом назад в дизайне, и уж конечно совсем не тем, что можно включить в дизайн-портфолио. Новые технологии (как, например, CSS) должны позволить создавать нечто лучшее и с таким же качеством дизайна, которое давало использование таблиц и закладок на основе растровых изображений.

Метод «Раздвижных дверей»

Мы можем создать красивые, действительно гибкие элементы интерфейса, которые расширяются и сужаются в зависимости от размера текста, используя два отдельных фоновых изображения. Одно—для левой части закладки, другое—для правой. Представьте, что эта пара картинок—Раздвижные двери, закрывающие один дверной проем. Эти двери сдвигаются и перекрываются больше, если дверной проем узкий, и наоборот, раздвигаются и перекрываются меньше, если нужно закрыть более широкое пространство. Это показано на иллюстрации:

Согласно этой модели одно изображение перекрывает часть другого. Если предположить, что по краям наших картинок есть нечто уникальное, как, например скругленный угол закладки, мы вряд ли захотим, чтобы одна картинка полностью закрывала другую, находящуюся позади. Чтобы этого не произошло, мы сделаем переднюю (в нашем случае левую) картинку как можно более узкой. Но при этом картинка должна быть достаточно широкой, чтобы сохранилась ее видимая уникальность. В нашем случае уникальными являются скругленные углы, поэтому передняя картинка будет шириной с эту, скругленную часть изображения:

Если размер закладки увеличится в результате, например, масштабирования текста, наши картинки разойдутся в стороны, обнажив неприятный разрыв. Следовательно, нужно оценить масштаб приемлемого расширения. Как сильно может увеличиться объект при масштабировании текста в браузере? Реально следует рассчитывать на возможность увеличения до 300%. Чтобы компенсировать этот рост, нужно растянуть фоновые изображения. В нашем примере, мы сделаем заднюю картинку (правая сторона) размером 400х150 пикселей, а переднюю—9х150 пикселей.

Не забывайте, что фоновые изображения видны только в «дверном проеме» элемента, к которому они применены («дверной проем»—область контента + отступ). Обе наши картинки прикреплены к внешним углам их соответствующих элементов. Видимые части этих изображений объединяются внутри дверного проема и образуют форму закладки:

Когда закладка увеличивается, изображения раздвигаются, заполняя более широкий проем, при этом видимая область изображений также становится больше:

Для нашего примера я создал в Photoshop'е два изображения с мягким, имитирующим трехмерность, тонированием. Для одной из закладок я высветлил заливку и затемнил обводку—этот вариант будет представлять «текущую» закладку. Следуя выбранной модели с левым и правым изображениями, мы должны разрезать картинку на две части:

То же самое нужно сделать и со светлым изображением для текущей закладки. Получив таким образом все 4 изображения, (1, 2, 3, 4) мы можем приступить к созданию кода и CSS для наших закладок.

Создание закладок

По мере знакомства с созданием горизонтальных списков при помощи CSS вы заметите как минимум два способа расположения группы объектов в один ряд. У каждого есть свои преимущества и недостатки. Оба требуют обращения к довольно сложным аспектам CSS, в результате можно быстро запутаться. Первый способ использует строчные элементы, второй—свойство float.

Первый способ—возможно более распространенный—предполагает изменение свойства display на «inline» (строчный). «Строчный» метод привлекателен своей простотой. Однако он приводит к проблемам в реализации нашего метода Раздвижных дверей в некоторых браузерах. Второй способ, на котором мы и сосредоточим наше внимание, использует плавающую модель для выстраивания элементов списка в горизонтальный ряд. Плавающая модель, однако, тоже может разочаровать. Ее противоречивое поведение порой нарушает всю мыслимую логику. Но все же общее понимание того, как справляться с несколькими плавающими элементами и знание надежных способов «выхода» из плавающего ряда (или его заключения в контейнер) может сотворить чудеса.

Мы попробуем поместить несколько плавающих элементов внутрь другого плавающего элемента-контейнера. Это надо сделать так, чтобы внешний родительский плавающий элемент полностью окружил внутренние плавающие элементы. Тогда мы сможем добавить позади наших закладок фоновый цвет или фоновое изображение. Важно помнить, что положение следующего за закладками элемента должно быть восстановлено при помощи CSS-свойства clear. Тогда плавающие закладки не смогут влиять на расположение других элементов страницы.

Начнем со следующего кода:

На практике блок #header мог бы содержать например, еще логотип и форму для поиска. В нашем примере мы сократим значение href для каждой ссылки до “#”. Понятно, что в реальной жизни вместо этого значка будет указан путь к файлу или папке.

Начнем работу с CSS с присвоения свойства float контейнеру #header. Это дает гарантию того, что контейнер в действительности «вмещает» элементы списка, которые тоже будут плавающими. Так как мы сделали #header плавающим, нам нужно присвоить ему ширину в 100%. Мы также добавим временный желтый фон, чтобы убедиться, что этот родительский элемент растягивается на всю ширину позади закладок. Ну и наконец зададим несколько основных шрифтовых свойств, чтобы обеспечить единство внешнего вида элементов:

#header {

float:left;

width:100%;

background:yellow;

font-size:93%;

line-height:normal;

}

Мы также зададим нулевое значение для полей и отступов элементов ul и li и уберем маркер списка. Для всех элементов списка напишем объявление float:left:

#header ul {

margin:0;

padding:0;

list-style:none;

}

#header li {

float:left;

margin:0;

padding:0;

}

Для ссылок мы зададим блоковое отображение с тем, чтобы контролировать происходящее, не беспокоясь о строчной модели:

#header a {

display:block;

}

Затем мы добавим наше правое фоновое изображение к элементу списка (изменения и добавления показаны полужирным шрифтом):

#header li {

float:left;

background:url("norm_right.gif")

no-repeat right top;

margin:0;

padding:0;

}

Перед добавлением левого фонового изображения сделаем паузу и посмотрим, что мы имеем к этой минуте, в примере 1. (Не обращайте внимания на правило, которое я применил к элементу body в файле примера. Оно лишь задает основные значения для полей, отступов, цветов и текста.)

- - -

Теперь мы можем разместить левое изображение впереди правого, применив его к ссылке (нашему внутреннему элементу). Сразу же добавим отступ, чтобы отодвинуть текст от краев закладки:

#header a {

display:block;

background:url("norm_left.gif")

no-repeat left top;

padding:5px 15px;

}

Результат показан в примере 2. Наши закладки начали обретать форму. В этом месте обратимся к смущенным пользователям IE5/Mac, которые задают себе вопрос: «Что здесь вообще происходит? Закладки сложены в вертикальную стопку и растянуты по ширине на весь экран.» Не беспокойтесь, скоро дойдем и до вас. А пока просто следите за происходящим или временно переключитесь на другой браузер и будьте уверены—скоро мы решим проблему IE5/Mac.

- - -

Теперь, когда картинки для простых закладок заняли свое место, зададим изображения для текущей закладки. Сделаем это, обратясь к элементу списка с id="current" и ссылке внутри него. Так как мы не меняем никаких свойств фона кроме фоновых изображений, будем использовать свойство background-image:

#header #current {

background-image:url("norm_right_on.gif");

}

#header #current a {

background-image:url("norm_left_on.gif");

}

В нижней части наших закладок нам нужна какая-то обводка. Но применение свойства border к родительскому #header не позволит нам «просочить» текущую закладку через эту границу. Вместо этого мы создадим новое изображение с нужной нам обводкой по его нижнему краю. И пока мы работаем с этим изображением, добавим легкий градиент, чтобы это выглядело так:

Мы применим это изображение к фону нашего контейнера #header (вместо заданного ранее желтого цвета), сдвинем его вниз контейнера и назначим фоновый цвет, совпадающий с верхним цветом созданного градиента. Мы также уберем добавленный изначально отступ для элемента body и добавим отступ в 10 пикселей к верхней, левой и правой частям элемента ul:

#header {

float:left;

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;