Позиционированием, который позволяет вам управлять точным местоположением,

Или размещением, элемента. Подробно о механизме позиционирования

Вы узнаете из гл. 13, а пока, чтобы показать тень, вы должны добавить

Три свойства в стиль . photo i mg, созданный в шаге 3.

ПРИМЕЧАНИЕ-----------------------------------------------Отрицательные

Значения nолей - еще один сnособ достижения сдвига тени. Детальное оnисание

Nредставлено по адресу http:/ /1976design.com/Ьiog/archive/2003/ll/14/shadows/.

Найдите стиль . photo i mg и добавьте в него три свойства позиционирования

следующим образом:

.photo img {

border: lpx solid #666:

background-color: #FFF:

padding: 4рх:

position: relative:

top: -Spx:

left: -Spx:

По сути, эти три свойства пррсто смещают фотографию вверх и влево на 5 пикселов,

Показывая находящийся на заднем плане рисунок с теневым эффектом

элемента <div>. В данном случае <div> используется в качестве элемента-контейнера

Изображения с эффектом тени.

Сохраните файл и просмотрите веб-страницу в браузере. Она должна иметь вид,

Представленный на рис. 8.13.

Каждое изображение отображается со своей собственной тенью, и вам не пришлось

даже запускать Photoshop!

230 Глава 8. Добавление графики на веб·сrраницы

[ CosmoFarmer.com's Indoor Grass Photo Gallery

:--------------·--·--------------··-----·----·--·······························---------·---------- ------------ ----·

; А seleclion oflodoor sod opdons: revie~ved and restcd ЬyCosmoJ"anner.com ln our srate-of·lhe-an "Apanment

: LaЬoraюry" оо 5th А 'o'l!llue.

Рис. 8.13. Добавление теневого эффекта к фотографиям nридает веб-странице объемность