Добрый день.

В прошлом выпуске рассылки приводилась статья, посвященная созданию меню с аннотацией. Многие заметили, что в некоторых браузерах указанный способ не работает. Данная ошибка возникла из-за названия слоя с описанием — description. Стоит это имя поменять на другое, например, descr, так сразу проблема оказывается снятой. Правильно работающий пример можно посмотреть на сайте.

Горизонтальное меню с аннотацией

Сегодня публикуется статья по теме, которая интересует многих. Периодически в форуме или по почте всплывает вопрос — как сделать тень? Для этого существует несколько способов. Один из достаточно простых и универсальных методов активно использует CSS и предложен Брайаном Уильямсом. Перевод статьи — В. Мержевич и Е. Богомольный. Статья приводится с небольшими сокращениями. Стиль и материал некоторым может показаться не совсем понятным, поэтому свои вопросы задавайте в комментариях к статье, по почте или задавайте на форуме.

Адрес статьи на сайте — htmlbook.ru/content/248.html

Создание тени по типу «луковой шелухи»

Да, «луковая шелуха». Аниматоры используют этот эффект, чтобы показать то, что обычно невозможно увидеть: кадры движения во времени. И теперь, веб-дизайнеры могут использовать подобный эффект, чтобы показать другую кажущуюся невозможность: создание реалистичной тени с использованием CSS.

Особенности

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

• не требует определения ширины (параметра width);
• позволяет модифицировать глубину тени без манипуляций с изображением;
• одинаково отображается во всех браузерах.

Чистим луковицу

«Луковая шелуха» используется при создании анимации для наложения кадров последовательности движения друг на друга, чтобы можно было заметить небольшие различия между отдельными кадрами. Аниматор просто просматривает набор слоев, чтобы увидеть одно целое движение через композицию его частей. Непрозрачные области на одном слое могут быть замечены на прозрачном слое выше него. Мы можем сделать то же самое и с тегом DIV. Используя CSS, допустимо наложить друг на друга несколько элементов DIV подобно луковице и, таким образом, получить желаемую композицию. В частности, создать тень (рис. 1).

Рис. 1. Изометрическая проекция слоев в виде «луковой шелухи»

Три слоя, каждый из которых содержит фрагмент изображения тени, накладываясь друг на друга, позволяют получить единую тень. Просто поместите ваш объект внутри трех контейнеров DIV и каждому из них дайте название класса, которое соответствует его роли. В примере 1, в частности, используются имена wrap1, wrap2 и wrap3 (класс wrap1 соответствует внешнему слою, а wrap3 — внутреннему).

Код CSS более сложен, чем код HTML, но не намного. Имеются в основном три вещи, которые правила стиля должны выполнить для создания тени.

• Отображение тени. Следует установить каждое из трех изображений для создания тени (собственно тень и два уголка к ней) на определенный слой.
• Отбрасывание тени. Требуется задать смещение изображений вправо и вниз на определенное расстояние.
• Размер по объекту. Тень должна соответствовать размерам объекта.

Шаг 1. Отображение тени

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

Чтобы один рисунок находился поверх другого и маскировал его, необходимо изменить его положение с помощью стилевого параметра z-index. На самом деле волноваться по этому поводу не стоит, т.к. вложенная структура тегов DIV работает на нас и позволяет автоматически получить нужный порядок. Мы просто назначаем класс с тенью самому нижнему тегу DIV в наборе слоев. Поскольку нижние теги DIV будут располагаться наверху, то им присвоим классы, которые отображают уголки тени (пример 2).

Когда мы назначаем требуемый рисунок к нужному классу, следует установить для него позиционирование с помощью свойства background-position. Если мы оставим его значение по умолчанию, то все, что мы увидим — это повторяющийся рисунок corner_tr.gif, поскольку слой с ним находится наверху набора слоев. Помните, техника «луковой шелухи» требует прозрачности верхних слоев, чтобы мы могли бы увидеть то, что находится ниже них. Для этого следует отменить повторение фонового рисунка с помощью значения no-repeat и позиционировать рисунок в нужном месте композиции.

Здравый смысл говорит нам, что изображение с именем corner_tr.gif должно находиться в правом верхнем углу, в то время как corner_bl.gif — в левом нижнем. Но что касается основного рисунка с тенью (shadow.gif), надо ли позиционировать и его? Факт — надо. Если мы хотим, чтобы тень отбрасывалась правее и ниже любого объекта, то следует определить ее положение в классе wrap1. В противном случае рисунок заполнит элемент DIV относительно его верхнего левого угла, т.е. совсем не там, где он требуется.

Основной слой — DIV.wrap1

Внешний DIV содержит самый большой из трех компонентов тени (файл shadow.gif), который позиционирован по правому и нижнему краю (пример 3).

На рис. 2 показано содержимое слоя и требуемый графический файл.

Рис. 2. Содержимое слоя wrap1

Средний слой — DIV.wrap2

Второй DIV, вложенный внутри первого, маскирует срез левого нижнего края тени и устанавливает плавное закругление (пример 4).

На рис. 3 показано содержимое слоя и требуемый графический файл.

Рис. 3. Содержимое слоя wrap2

Внутренний слой — DIV.wrap3

Третий DIV, вложенный внутри второго, занимается срезом верхнего правого края тени.

На рис. 4 показано содержимое слоя и требуемый графический файл.

Рис. 4. Содержимое слоя wrap3

Шаг 2. Отбрасывание тени

Следующий шаг для CSS — смещение тени, которое создает эффект ее отбрасывания. Проще не бывает. Все что требуется — это добавить параметр padding, который устанавливает поля слева и снизу для самого нижнего слоя. Когда padding применяется к тегу DIV, то он изменяет размеры объекта, и остальные два слоя изменяются вместе с ним. Как результат, все три компонента тени, расположенные по правой и нижней стороне этих слоев, смещаются одновременно. Теперь их можно увидеть через пустой промежуток созданный с помощью атрибута padding (пример 6).

Результат данного примера продемонстрирован на рис. 5.

Рис. 5. Использование смещения содержимого

Модификация смещения

Изменение величины смещения тени делается почти также просто, как и замена значений параметра padding для слоя wrap3. Мы говорим «почти», поскольку настройка значения padding просто перемещает тень, в то время как уголки продолжают прижиматься к краям контейнеров. Чтобы точно смоделировать смещение тени, для обоих уголков следует использовать атрибут background-position.

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

Шаг 3. Размер по объекту

Потребуется небольшая ловкость рук, чтобы убедить браузер устанавливать тень по ширине объекта. Без этого потребовалось бы определять ширину объекта, чтобы корректно добавить тень.

В большинстве браузеров DIV принимает размер объекта, когда для него добавляется параметр float. Данный способ подойдет, но только не в том случае, если вы используете Internet Explorer 5 под Macintosh. Простой факт, что есть люди, которые пользуются этим браузером, заставил поискать альтернативное решение. К сожалению, ни одно не было найдено, по крайней мере, такое, которое было бы универсальным.

Некоторое экспериментирование показало, что использование значения inline-table атрибута display может спасти ситуацию. Так, применение комментариев совместно со слэшем (/* \*/display: block/**/) позволяет скрыть этот код от браузера Internet Explorer 5 под Macintosh, «подсовывая» ему строку display: inline-table, в то время как остальные браузеры «видят» параметр float: left. Таким образом, получается, что «размер по объекту» работает во всех браузерах (рис. 6).

Рис. 6. Конечный результат

В итоге CSS с учетом всех трех шагов показан в примере 7.

Еще один стиль для хорошего тона

Как было показано в примерах выше, изображения достаточно часто используются с приведенной техникой. В подобном случае для изображения, к которому добавляется тень, следует установить свойство display со значением block. Во многих случаях это поможет избежать наложения элементов друг на друга. Просто добавьте следующий стиль (пример 8).

Поскольку это только перевод, стиль и материал авторский, то изложу здесь некоторые свои комментарии.

1. Термин «луковая шелуха» вообще не характерен для веб, он используется в специализированных программах для анимации, вроде Macromedia Flash. Для людей сталкивающихся с подобными программами приведенная техника покажется знакомой.

2. Сама тень (файл shadow.gif) представляет собой рисунок размером 500 х 500 пикселов с размытыми правым и нижним краями. Такой размер позволяет добавлять тень, как к небольшим объектам, так и объектам большего размера. В том случае, если предполагается использовать тень к элементам веб-страницы, ширина или высота которых превышает 500 пикселов, рисунок следует изменить.

3. Цвет тени зависит от рисунков, которые ее формируют. Обычно это серый цвет, но его можно изменить и добавить определенный оттенок, сделать тень светлее или темнее в зависимости от своих предпочтений.

4. Приведенные рисунки тени рассчитаны для использования на белом фоне. Если у вас ситуация иная, придется менять изображения в графическом редакторе или создать их заново с учетом цвета фона.

Интересные темы форума

Почему логотип обычно размещают в левом верхнем углу

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

Как узнать свойство слоя

Если через JavaScript попытаться получить значение атрибута CSS, то вернется пустая строка. Как же в этом случае получить нужное значение атрибута слоя.

Горизонтальное выпадающее меню на CSS без JS

Можно ли построить ниспадающее меню только с помощью CSS без использования дополнительных скриптов и как.

robot.txt

Для чего нужен файл robot.txt и требования, которые к нему предъявляются.

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