Как добавить тень к картинке с помощью CSS 3

С приходом CSS 3 пришли и новые возможности для web-мастеров.Теперь стало возможно добавить реалистичную тень к картинкам.Удачно установленная тень позволяет выделить картинку,сделать ее более "рельефной" штоли.



Теперь непосредственно код:
.shadow {
box-shadow:5px 5px 15px #808080;
-webkit-box-shadow 5px 5px 15px #808080;
-moz-box-shadow: 5px 5px 15px #808080;
}

Вот вам для примера:

Изменяя параметры вы можете настроить тень под себя:изменить цвет,наклон,размытие.Пройдемся по ним чуть подробнее: Первое значение px(отсчет слева направо) - сдвиг по горизонтали
Второе значение px - сдвиг по вертикали
Третье значение - радиус размытия тени
Четвертое значение - радиус растяжения тени
Этот код следует поместить в css документ,отвечающий за стиль(обычно style.css,но могут быть и другие варианты),ну и добавить класс shadow к изображению. Все,наслаждайтесь эффектом.

П.С. Этот способ не работает в IE(ослик не отображает тень),для этого нужно настраивать фильтры,которые в больших количествах тормозят работу.

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