Как добавить тень справа от рисунка?

🕛 22.01.2009, 23:57

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

Для добавления тени нам понадобятся три картинки, которые необходимо предварительно подготовить в графическом редакторе. Это собственно сама тень (рис. 1), правый верхний уголок (рис. 2) и левый нижний уголок (рис. 3).

Рамка вокруг рисунков приведена для наглядности и естественно к картинкам не добавляется. Ширина изображения тени зависит от цели ее использования, например, если планируется устанавливать тень для рисунков шириной не более 600 пикселов, то имеет смысл сделать такой же размер и у тени. В остальных случаях рекомендуется задать размер изображения по возможности больше, например, 1200х1200 пикселов.

Сам метод предложен Брайаном Уилсоном и заключается в использовании трех тегов <DIV> последовательно вложенных один в другой. Для каждого тега вставляется соответствующая картинка в виде фона с помощью стилевого атрибута background. Чтобы различать теги, для каждого введем свой стилевой класс, как показано в примере 1.
Пример 1. Код для добавления рисунка

<div class="shadow"> <div class="bottom-left-corner"> <div class="top-right-corner"> <img src="pic.jpg" alt="Картинка"> </div> </div>
</div>Класс shadow создает основную тень без уголков (рис. 1), класс top-right-corner добавляет правый верхний уголок (рис. 2), а bottom-left-corner левый нижний уголок (рис. 3). Стиль для этих классов приведен в примере 2.

Пример 2. Стиль для создания тени

<style type="text/css"> .shadow { float: left; /* Создание обтекания для правильного положения тени */ background: url(images/shadow.png) no-repeat 100% 100%; /* Рисунок с тенью */ } .bottom-left-corner { background: url(images/corner_bl.png) no-repeat -10px 100%; /* Левый нижний уголок */ } .top-right-corner { padding: 0 14px 14px 0; /* Ширина тени справа и снизу */ background: url(images/corner_tr.png) no-repeat 100% -10px; /* Правый верхний уголок тени */ }

</style>Поскольку у нас тень падает справа и снизу от рисунка, то также следует и позиционировать фоновую картинку. Поэтому в параметрах атрибута background для класса shadow укажем right bottom или 100% 100%. 

Значение позиционирования для левого нижнего уголка (класс bottom-left-corner) будет 0 100% (0 горизонтали и 100% по вертикали), а для правого верхнего уголка (класс top-right-corner) наоборот - 100% 0 (100% по горизонтали и 0 по вертикали). Для всех фоновых рисунков повторение фона отменено значением no-repeat атрибута background.

Однако добавления фона недостаточно, ведь слои накладываются друг на друга и тень не будет видна, поэтому к внутреннему слою (в нашем случае это top-right-corner) следует добавить отступ справа и снизу через универсальный атрибут padding. 

По умолчанию слои занимают всю доступную ширину, поэтому тень окажется возле правого края окна браузера. Нам же требуется, чтобы тень была сбоку от рисунка, иными словами, ширина слоев должна совпадать с шириной рисунка плюс размер видимой тени. Можно явно установить ширину слоя shadow с помощью атрибута width, но это неудобно, ведь размер картинок может различаться, и мы не добьемся универсальности. Поэтому воспользуемся атрибутом float со значением left, добавляя его к слою shadow. Это превратит слой в плавающий элемент, для которого ширина формируется автоматически исходя из содержимого. Также для устранения возможного наложения слоев добавим display: block для рисунка. 

Окончательный код приведен в примере 3.

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

<!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"> .shadow { background: url(images/shadow.png) no-repeat 100% 100%; /* Рисунок с тенью */ float: left; /* Создание обтекания для правильного положения тени */ } .bottom-left-corner { background: url(images/corner_bl.png) no-repeat -10px 100%; /* Левый нижний уголок */ } .top-right-corner { padding: 0 14px 14px 0; /* Ширина тени справа и снизу */ background: url(images/corner_tr.png) no-repeat 100% -10px; /* Правый верхний уголок тени */ } .shadow IMG { display: block; /* Блочный элемент */ } .clear { clear: left; /* Отменяем обтекание */ } </style> </head> <body> <div class="shadow"> <div class="bottom-left-corner"> <div class="top-right-corner"><img src="images/sketch.png" alt="Картинка"></div> </div> </div> <div class="clear"></div> <p>Невозможный рисунок</p> </body>
</html>Результат данного примера показан на рис. 4. Атрибут float заставляет все нижеследующие элементы после рисунка обтекать его по правому краю. Поэтому текст будет располагаться не снизу от рисунка, а справа от него. Чтобы отменить обтекание, создадим пустой слой с именем clear, для которого будет действовать атрибут clear со значением left.



Рис. 4. Картинка с тенью

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

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