Технология раздвижных дверей в CSS

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

С помощью простого дизайна мы можем это сделать.

Откуда берутся инновации?

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

До того, как CSS получил широкое распространение, мы видели множество инноваций в дизайне навигации по вкладкам. Оригинальная форма, умелое смешивание цветов и имитация многих физических интерфейсов реального мира. Но эти проекты часто слишком полагаются на сложные изображения с текстом или упакованы во вложенные таблицы. Изменение текста или изменение порядка меток требует сложного процесса. Текст даже растягивать нельзя, иначе это сильно повлияет на верстку страницы.

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

технология раздвижных дверей

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

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

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

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

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

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

создание этикеток

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

Первый метод, который может быть более распространенным, заключается в отображении всех элементов списка в строке. Красота встроенного подхода заключается в его простоте. Однако для технологии раздвижных дверей, о которой мы собираемся поговорить, встроенный метод имеет некоторые проблемы с интерпретацией в конкретных браузерах. Второй метод, на котором мы сосредоточимся, заключается в использовании чисел с плавающей запятой для расположения элементов списка в одной строке. К сожалению, кажущееся противоречивым поведение чисел с плавающей запятой ускользает от естественной логики. Тем не менее, стоит обсудить базовое понимание того, как обращаться с несколькими плавающими элементами и что означает надежность плавания.

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

Начнем со следующей разметки:

<div id="header">
<ул>
<li><a href="#">Главная</a></li>
<li id="current"><a href="#">Новости</a></li>
<li><a href="#">Продукты</a></li>
<li><a href="#">О программе</a></li>
<li><a href="#">Связаться</a></li>
</ul>
</div>

На самом деле элемент div #header также может содержать логотип и поле поиска. В нашем примере мы хотим сократить значение каждой гиперссылки в цепочке привязки. Очевидно, что эти значения должны правильно содержать расположение файла или каталога.

Мы начинаем разработку списка с размещения контейнера #header. Это гарантирует, что контейнер фактически действует как контейнер, содержащий плавающие внутри него элементы списка. Поскольку элемент является плавающим, нам также необходимо объявить его ширину равной 100%. Добавьте временный желтый фон, чтобы родительский контейнер полностью заполнил всю область за меткой. Аналогичным образом установите свойства текста по умолчанию, чтобы обеспечить единообразный стиль:

#header {
плавать: влево;
ширина: 100%;
фон: желтый;
размер шрифта: 93%;
высота строки: нормальная;
}

Теперь нам также нужно установить значение поля/отступа по умолчанию для неупорядоченного списка равным 0 и удалить отметку перед элементом списка. Каждый элемент списка перемещается влево:

#header ул {
маржа: 0;
дополнение: 0;
стиль списка: нет;
}
#header ли {
плавать: влево;
маржа: 0;
дополнение: 0;
}Установите цепочку привязок для принудительного рендеринга как блочного объекта, и мы сможем без проблем управлять всеми стилями:

#header а {
дисплей: блок;
}

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

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

#header а {
дисплей: блок;
фон:url("norm_left.gif")
без повтора слева вверху;
отступ: 5 пикселей 15 пикселей;
}

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

Теперь, когда фоновое изображение для общей метки готово, нам нужно заменить изображение «текущей» метки. Мы достигаем этого, добавляя id="current" и цепочку привязки к элементу целевого списка. Поскольку нет необходимости менять внешний вид фона, кроме изображения, мы используем функцию фонового изображения:

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

#header {
плавать: влево;
ширина: 100%;
фон:#DAE0D2 URL("bg.gif")
повтор-x внизу;
размер шрифта: 93%;
высота строки: нормальная;
}
#header ул {
маржа: 0;
отступ: 10 пикселей 10 пикселей 0;
стиль списка: нет;
}

Мы делаем это, уменьшая значение нижнего заполнения обычной цепочки привязок на 1 пиксель (5px-1px=4px), а затем добавляя вычтенное отступ к «текущей» цепочке привязок.

последние штрихи

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

Теперь, когда углы стали прозрачными, изображение слева будет видно через углы изображения справа. Чтобы компенсировать это, мы добавляем к элементу формы отступ (9 пикселей), который соответствует ширине изображения слева. Теперь, когда мы добавили отступы к элементу формы, нам нужно удалить ту же ширину, чтобы центрировать текст (15px-9px=6px):

#header ли {
плавать: влево;
фон:url("right.gif")
неповторяющийся правый верх;
маржа: 0;
отступ: 0 0 0 9 пикселей;
}
#header а {
дисплей: блок;
фон:url("left.gif")
без повтора слева вверху;
отступы: 5 пикселей 15 пикселей 4 пикселей 6 пикселей;
}

Это еще не конец, потому что добавление 9 пикселей отступа создает разрыв между левым изображением и левой стороной метки. Теперь, когда левый и правый края видимого «дверного проема» соединены, нам больше не нужно держать левое изображение сверху. Итак, поменяйте порядок двух фоновых изображений и поменяйте их местами. Также поменяйте местами два изображения, используемые в «текущем» теге:

#header ли {
плавать: влево;
фон:url("left.gif")
без повтора слева вверху;
маржа: 0;
отступ: 0 0 0 9 пикселей;
}
#header a, #header Strong, #header span {
дисплей: блок;
фон:url("right.gif")
неповторяющийся правый верх;
отступы: 5 пикселей 15 пикселей 4 пикселей 6 пикселей;
}
#header #current {
фоновое изображение:url("left_on.gif");
}
#header #current a {
фоновое изображение:url("right_on.gif");
отступ-дно: 5 пикселей;
}

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

По остальной части задачи внесем все изменения сразу: утяжелим текст метки, изменим текст в обычной метке на коричневый, изменим «текущий» текст метки на темно-серый, удалим подчеркивание ссылки и, наконец, измените цвет текста при наведении. Изменился на тот же темно-серый цвет. После серии изменений посмотрим на эффект на данный момент 5.

Согласованное решение
После Эффекта 2 мы обнаружили одну проблему: в режиме просмотра IE5/Mac каждая вкладка расширяется и занимает всю ширину браузера, поэтому вкладки располагаются вертикально вместе. Это не то, чего мы хотим.

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

Проблема возникает с изображениями в IE5/Mac, когда элемент объекта блока автоматической ширины вставляется в плавающий элемент. Другие браузеры по-прежнему минимизируют числа с плавающей запятой и игнорируют блочные элементы внутри контейнера. Но IE5/Mac не следует этому поведению, вместо этого он расширяет элементы объектов с плавающей запятой и блоками до максимально возможной ширины. Чтобы решить эту проблему, мы заодно разместим цепочку привязок, но только для IE5/Mac, чтобы не отказываться от других браузеров. Сначала мы устанавливаем плавающие правила для якорной цепочки. Затем мы используем метод комментария с обратной косой чертой, чтобы скрыть это правило, чтобы оно действовало только для IE5/Mac и игнорировало другие браузеры:

Сделайте выводы из одного примера. Мы только что практиковали технику раздвижной двери, используя простой текст и неупорядоченный список для создания навигационных меток с небольшим количеством стилей. Он быстро загружается, удобен в обслуживании, а размер текста можно сильно расширить, не испортив внешний вид. Нам нет необходимости повторять гибкость технологии раздвижных дверей при создании сложных стилей навигационных панелей.

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

В некоторых случаях метки не обязательно симметричны. Я быстро сделал вторую версию этой этикетки, также с затененным 3D-стилем, угловатыми краями и характерной левой частью. По второй версии мы можем даже поменять местами левое и правое изображения. Благодаря такому подробному макету и умному управлению изображениями мы можем удалить нижнюю границу кнопки, чтобы изображение метки лучше вписывалось в фон, как показано в третьей версии. Если ваш браузер поддерживает переключение между несколькими таблицами стилей, вы даже можете использовать его для свободного переключения между несколькими версиями панели навигации.

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