Вставка рисунков с тенью

Эффект тени создается путем применения большого изображения с нависающей тенью к фону оболочки div. Для вывода тени изображение смещается с помощью внешних полосок с отрицательными значениями ширины. В первую очередь нужно создать изображение нависающей тени. Создайте в photoshop новый файл с размерами не меньшими максимального размера изображения. Разблокируйте слой фона и заполните его цветом, на котором должна располагаться тень, например, белым цветом, если фон страницы белый. Создайте новый слой и заполните его этим же цветом. Переместите новый слой вверх и влево на 4 или 5 пикселей и примените к нему нависающую тень шириной 4 или 5 пикселей. Сохраните изображение в формате .gif и присвойте ему имя, например, shadow.gif.

Для создания эффекта нужно сначала применить изображение тени к фону оболочки div. Поскольку элементы div являются блочными, они расширяются по горизонтали, занимая всё доступное пространство. Нам нужно, чтобы оболочка div охватила изображение. Это можно сделать, явно задав ширину элемента div плавающим, чтобы он съёживался на современных браузерах (за исключением IE5).

/*код стиля*/
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}

.img-wrapper img {
background-color: #bdd9ef;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}


<div class="img-wrapper"><img src="images/smolnii.gif" width="280" height="280" alt="Смольный собор" /></div>

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

margin: -5px 5px 5px -5px;

Окончательно получим:

/*код стиля*/
.img-wrapper {
background: url(images/shadow2.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 3px 3px -5px;
position: relative;
}


<div class="img-wrapper"><img src="images/smolnii.gif" width="280" height="280" alt="Смольный собор" /></div>

В данном примере вместо отрицательной внешней полоски используется относительное позиционирование для смещения изображения.