Редко обсуждаемое преимущество CSS - способность к изображениям фона слоя, разрешая им скользить друг по другу, чтобы создать определенные эффекты. Текущее состояние CSS2’s требует отдельного элемента HTML для каждого второстепенного изображения. Во многих случаях, типичное повышение для общих компонентов интерфейса уже обеспечило несколько элементов для нашего использования. Один из тех случаев - tabbed навигация. Пришло время забирать контроль над счетами, которые непрерывно{все время} растут в популярности как первичное средство навигации сайта. Теперь, когда CSS широко поддержан, мы можем провернуть качество и Появление счетов на наших сайтах. Вы наиболее вероятно знаете, что CSS может использоваться, чтобы приручить равнину, незаказанную список. Возможно Вы даже видели списки, редизайнируемые как счета, выглядя кое-что как это:

[Обычный пример CSS-базирующихся счетов, используя плоские цвета и брусковый - от углов.]

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

[Стилизованное использование счетов округлило углы и тонкую трехмерную штриховку.]

С простым моделированием, мы можем.

Где - Новшество?

Многие из CSS-базирующихся счетов, которые я видел, страдают от тех же самых родовых особенностей: глыбовые прямоугольники цвета, возможно схема{контур}, граница исчезает для текущего счета, цвет изменяется для состояния парения. Этот весь CSS - может предложить нам? Связка коробок и плоских цветов? До более широко распространенного принятия CSS, мы начали видеть большое новшество в навигационном редизайне. Творческие формы, своевольное цветное смешивание, и мимикрия физических интерфейсов от реального мира. Но эти редизайны, часто на которые зависят тяжело{в большой степени} на сложное строительство вложенных текстом изображений, или были обернуты с многократными вложенными таблицами. Редактирование текста или изменяя заказ счета вовлекало тяжелый процесс. Изменение размеров текста было невозможно, или вызвало существенные проблемы с расположением{макетом} страницы. Чистая навигация текста намного легче поддержать{редизайн} и грузы более быстро чем навигация текста-поскольку-изображение. Кроме того, даже при том, что мы можем добавить, что высокий звук приписывает каждому изображению, чистый текст еще более доступен, так как это может быть изменено пользователями с видением, которому вредят. Неудивительно, что чистая навигация на основе текста, разработанная с CSS, прыгает{подскакивает} назад в редизайн сайта. Но наиболее CSS-базирующийся редизайн счета пока - шаг назад по внешности от того, что мы имели обыкновение делать - конечно ничто, чтобы быть включенными в портфель редизайна . Недавно принятая технология (как CSS) должна позволить нам создавать, кое-что лучше, не теряя качество редизайна предыдущего ТАБЛИЦЫ рубит, и все Изображение базировало счета.

Техника Раздвижных дверей

Красиво обработанные, действительно гибкие компоненты интерфейса, которые расширяются и контракт с размером текста, могут быть созданы, если мы используем два отдельных второстепенных изображения. Один для покинутых, один для права. Думайте об этих двух изображениях как Раздвижные двери, которые заканчивают один дверной проем. С этой моделью, одно Изображение покрывает часть другого. Принятие{предположение} мы имеем кое-что уникальное на внешней стороне каждого изображения, как округл-угол счета, мы не хотим Изображение впереди к полностью неясному Изображение позади этого. Чтобы препятствовать этому случаться, мы делаем Изображение впереди (лево-сторона для этого примера) столь же узким насколько возможно. Но мы держим только достаточно широким, чтобы показать что уникальность стороны. Если внешние углы округлены, мы должны сделать переднее Изображение только столь же широким как кривая часть изображения: [Диаграмма показывает изолированное узкое Изображение лево-стороны с округленным главным-левым углом, затем повторяет то то же самое Изображение, помещенное перед изображением правильной стороны с округленным углом правильной стороны.] Если объект станет немного большим чем ширина, показанная выше, из-за отличающегося текста или изменений размера типа, то изображения будут разделены, создавая уродливый промежуток. Мы должны сделать произвольное суждение о количестве расширения, которое мы приспособим{разместим}. Как большой мы думаем, что объект мог бы расти, поскольку текст изменен в браузере? Реалистично, мы должны объяснить возможность нашего текста счета, увеличивающегося по крайней мере на 300 %. Мы должны расширить второстепенные изображения, чтобы дать компенсацию за тот рост. Для этих примеров мы сделаем обратное Изображение (правильная сторона) 400x150 пикселы, и переднее Изображение 9x150 пикселы. Имейте в виду, что фон отображает только показ в доступном "дверном проеме" элемента, к которому они применены (довольная область + дополняющий). Два изображения поставлены на якорь к внешним углам их соответствующих элементов. Видимые части этого фона отображают пригодный вместе в дверном проеме, чтобы сформировать подобную счету форму: [Диаграмма показывает оба изображения с дополнительной высотой, добавленной к основанию. изображению правильной стороны также добавили дополнительную ширину налево. Единственные части, которые остаются видимыми пригодный вместе совершенно, чтобы сформировать illustion подобной счету формы.] Если счет вызван к большему размеру, понижение{слайд} изображений обособленно, заполняя более широкий дверной проем, показывая больше каждого изображения: [Диаграмма показывает два изображения, разделенные немного, чтобы создать более широкий счет, так же как немного более высокую вертикальную высоту, чтобы показать больше каждого изображения. Так как оба второстепенных изображения имеют пособия на расширение, иллюзия - то, что сам счет расширился естественно с текстом, содержавшимся внутри.] Для этого примера, я использовал Фотомагазин, чтобы создать два гладких, немного трехмерных, таможенных изображения счета, показанные в начале этой статьи. Для одного из счетов, освещалось заполнение, и граница затемнена - более легкая версия будет использоваться, чтобы представить "текущий" счет. Учитывая модель этой техники для левых и правых изображений счета, мы должны расширить область охвата изображения счета, и сократить это в две части: [Лево-и правильная сторона отображает] Та же самая вещь должна случиться с более легким текущим изображением счета. Как только мы имеем все четыре созданные изображения, (1, 2, 3, 4) мы можем вскочить в повышение и CSS для наших счетов. Создание (редизайн)Счета Поскольку Вы исследуете Создание (редизайн)горизонтальных списков с CSS, Вы заметите по крайней мере два метода чтобы устроить группу пунктов в один ряд. Каждый идет с его собственными выгодами и недостатками{препятствиями}. Оба требуют контакта с довольно напуганными аспектами CSS, которые быстро становились запутывающими. Каждый использует действующую коробку, другие плавания использований. Первый Метод - и возможно более общее{более обычное} - должен изменить показ каждого пункта списка к "действующему". Действующий метод привлекателен для его простоты. Однако, действующий метод вызывает несколько проблем предоставления в определенных браузерах для техники Раздвижных дверей, которую мы собираемся обсуждать. Второй Метод, который является тем, на котором мы сосредоточимся, плавания использований, чтобы поместить каждый пункт списка в горизонтальный ряд. Плавания могут быть одинаково расстраивающими{печальными}. Их по-видимому непоследовательное{противоречивое} поведение обходит всю естественную логику. Однако, основное{элементарное} понимание того, как иметь дело с многократными пущенными в ход элементами, и средствами надежно "вспыхнуть" из плаваний (или содержать их) может достигнуть чудес. Мы собираемся вкладывать несколько пущенных в ход элементов в пределах другого содержащего пущенный в ход элемент. Мы делаем это так, чтобы внешнее родительское плавание полностью обернуло вокруг плаваний внутри. Этим путем, мы в состоянии добавить второстепенный цвет и/или Изображение позади наших счетов. Важно помнить, что следующий элемент после наших счетов должен перезагрузить его собственное Положение при использовании CSS ясная собственность. Это препятствует пущенным в ход счетам затрагивать Положение других элементов страницы. Эффект одновременнного нажатия клавиш - простое взаимодействие, которое помогает удобству и простоте использования. Если ваш редизайн последователен, пользователь только должен будет испытать эффект однажды понять то, что это делает всюду по вашему всему сайту, который делает мое хихиканье парня HCI с восхищением. В течение многих лет мы предварительно загрузили наши на-госстве{на-состоянии} изображения, чтобы помочь браузеру в его представлении одновременнного нажатия клавиш. Предварительно загружение увеличений вес начальной загрузки, но добавляет к удобству и простоте использования, уменьшая ждущееся время для на-госстве{на-состоянии} изображения, чтобы появиться. Уменьшения, но, возможно, не устраняют. Даже когда предварительно загружено, некоторые браузеры представляют мгновенные паузы до предоставления изображения. Помимо того, чтобы быть раздражающим, эта мгновенная пауза может вызвать проблемы когда посетитель mouses по элементу мимоходом или слишком быстро. Если движение мыши слишком быстро, браузер не имеет времени, чтобы отдать Изображение и, худший вариант, может дарить Вам сломанное изображение изображения. Для оптимального удобства и простоты использования, одновременнное нажатие клавиш{пролонгация кредита} должно быть мгновенным - ОБМАН! - или эффект уменьшен. Это решительно уменьшено в тех случаях, когда на-госстве{на-состоянии} не предварительно загружен должным образом, или вообще, и браузер должен возвратиться к серверу для файла. Даже с быстродействующей связью, это может решительно препятствовать опыту посетителя. Отметьте: следующий пример покажет правильно в IE5 + и Опере 6 +. По мнению этого автора, Mozilla/Netscape 6’s обработка CSS оставляет место для усовершенствования, к которому будут обращаться позже. Благодаря удивлению, которое является CSS, мы можем спонтанно изменить второстепенный цвет. Так как браузер не должен сослаться на дополнительный файл, эффект непосредственен{немедленный} и полезен. (Очевидно, это требует сотрудничества редизайнера: второстепенные цвета должны быть твердыми; текстовые или изобразительные элементы не могут быть anti-aliased; и, в этих примерах, изображением должен быть ДЖИФ.)  Это - чрезвычайно изящный опция, поскольку это обеспечивает немедленную реакцию к действиям посетителя, и имеет добавленную выгоду того, чтобы быть благополучно игнорируемым браузером, который не понимает это. Между прочим, если Вы хотите изменить цвет текста вместо второстепенного цвета, метод CSS - то же самое; только подготовка изображения отлична. Вместо второстепенного изображения, являющегося прозрачным, текст. В действительности, Вы создаете трафарет для каждого элемента. Второстепенный цвет покажет через ваш трафарет, показывающий ваш текст. Измените второстепенный цвет как показано, и Вы находитесь в подобном Flynn. К сожалению, в моем опыте (и я испытываю это теперь), NS6 иногда не отдает второстепенный цвет правильно, таким образом я увеличиваю CSS с избыточным JavaScript. Пока мы добавляем подлинники, мы можем увеличить наше военно - морское немного, добавляя воздействие и удобство и простоту использования, чтобы дать это что дополнительный аромат "с добавленной стоимостью". Отметьте: подлинник, который следует, разработан, чтобы работать с IE5 +, Mozilla/Netscape 6 и Опера 6. Если Вы хотите код, который будет воздействовать на другие браузеры, Вы можете использовать поперечную платформу, утилиты ДОМА включают файл, развитый в предыдущей статье ALA. {Несколько читателей сообщили о "подскакивающей" ошибке{жуке} в IE6 на некоторых платформах, который затрагивает DOM-базирующийся пример, показанный затем. Мы сообщили об ошибке{жуке} к Microsoft в марте 2002. Благодаря всем, кто послал скрин-шоты и сообщения. - редактор} Да, я знаю, что система цветов менее чем прекрасна, но я думаю, что это делает пункт. Понятия{концепции} JavaScripting, используемые здесь не трудны; это - просто вопрос использования ДОМА, чтобы достигнуть то, что Вы хотите. Управляя многократными элементами, мы можем заставить наши одновременнные нажатия клавиш передать дополнительную информацию, не жертвуя работой{выполнением}. Время, которое требуется ваши одновременнные нажатия клавиш, чтобы активизировать, может казаться тривиальным, но это - только еще один способ сжать ваши сайты. Я знаю, что мои редизайнери замечают. Я не знаю, замечают ли пользователи, но, Вы знаете какой{что}? Я не забочусь. Я только забочусь, что они не замечают отверстие в их опыте.