Рисование тени под блоком

Метки:

Добавление тени к блокам или изображениям применяется для привлечения к ним внимания, визуального выделения или продиктовано дизайном сайта. Рассмотрим, как в программе Photoshop создавать различные виды теней и добавлять их к элементам веб-страницы.

Самая простая тень показана на рис. 1 и отображается у блоков заданной ширины снизу.

Рис. 1

Рис. 1. Тень под блоком

Для создания подобной тени выберем меню File > New (Файл > Новый) и в настройках изображения укажем размер 200х15 пикселов. После чего выбираем инструмент Pen Tool (— Перо, <P>) и щелкаете им в трех местах, создавая прямоугольный треугольник (рис. 2).

Рис. 2. Заготовка для тени

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

Если форма тени не нравится, то ее можно подкорректировать специальным инструментом выделения ( — Direct Selection Tool, <A>). Для этого нужно щелкнуть по узловым точкам (на рис. 2 они представлены как квадратики) и перетащить их на новое место.

Теперь размываем тень через фильтр Размытие по Гауссу (Filter > Blur > Gaussian Blur...). Поскольку фильтры не действуют на слой с формой, то его необходимо растеризовать, иными словами перевести из векторного формата в растровый. Поэтому при выборе фильтра выводится предупреждение о растеризации. Нажимаем кнопку OK, после чего открывается диалоговое окно фильтра (рис. 3).

Рис. 3

Рис. 3. Размытие тени

Здесь управляем только одним параметром, который называется радиус размытия. Чем больше значение, тем больше будет размыто изображение и, соответственно, наоборот. Подбор значения опять же происходит исходя из собственных предпочтений.

Тень получается слишком темной и необходимо уменьшить ее интенсивность. Для этого достаточно изменить значение непрозрачности слоя (Opacity) в панели Layers (Слои), как показано на рис. 4.

Рис. 4

Рис. 4. Изменение интенсивности тени

После выбора значения Opacity сохраняем изображение через панель File > Save for Web... (Файл > Сохранить для Web) под именем shadow.png (рис. 5).

Рис. 5. Изображение тени для блока

Из-за того, что размытие происходит вокруг объекта, верхняя часть тени несколько осветляется. В большинстве случаев это мало заметно, тем не менее, приведем способ, как избавиться от подобной особенности. Для этого рисунок следует заранее сделать несколько больше по высоте и нарисовать тень не по верхнему краю, а ниже (рис. 6).

Рис. 6. Заготовка для создания тени

Далее размываем тень (рис. 7) и применяем к изображению инструмент Crop ( — Кадрирование, <C>), отрезая лишние части сверху и снизу от тени (рис. 8).

Рис. 7. Размытие тени

Рис. 8. Кадрирование рисунка с тенью

Само добавление рисунка осуществляется с помощью тега <IMG>, выводимого после текста, как показано в примере 1. При использовании в документе строгого <!DOCTYPE> к рисункам применяется межстрочный интервал, что приводит к появлению небольшого зазора вверху картинки. Поэтому в стилях применяется атрибут line-height, который нивелирует этот недостаток.

Пример 1. Добавление тени к блоку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Интересная информация</title>
  <style type="text/css">
   .interest {
    width: 200px; /* Ширина блока */
   }
   .interest div.content {
    padding: 10px; /* Поля вокруг текста */
    background: #f2efe6; /* Цвет фона */
   }
   .interest .shadow {
    line-height: 1px; /* Межстрочное расстояние */
   }
  </style>
 </head>
 <body>
  <div class="interest">
   <div class="content">
    <h3>Интересная информация</h3>
    <p>Зафиксированы случаи, когда лев в одиночку справлялся с африканским буйволом, 
        вес которого превышает 600 килограмм, а характер оставляет желать лучшего.</p>
   </div>
   <div class="shadow"><img src="shadow.png" alt="" width="200" height="15"></div>
  </div>
 </body>
</html>

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

Рис. 9

Рис. 9. Вид блока с тенью в браузере Opera

RommmKa, 13.04.2009

спасибо. попробую использовать

shaman, 03.05.2009

Отлично. Давно искал данный материал!

Разделы

Термины

Рисование тени под блоком

Отправить комментарий