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

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

DouglasBowman

Среди редко обсуждаемых преимуществ 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 для наших закладок.

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

По мере знакомства с созданием горизонта

Внимание, отключите Adblock

Вы посетили наш сайт со включенным блокировщиком рекламы!
Ссылка для скачивания станет доступной сразу после отключения Adblock!

Скачать