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

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

Теперь непосредственно код:

.test-shadow { box-shadow:5px 5px 15px #808080; -webkit-box-shadow 5px 5px 15px #808080; -moz-box-shadow: 5px 5px 15px #808080; }

Чтобы картинка получила тень, ей необходимо присвоить класс text-shadow.

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

Первое значение px(отсчет слева направо) — сдвиг по горизонталиВторое значение px — сдвиг по вертикалиТретье значение — радиус размытия тениЧетвертое значение — радиус растяжения тени

Этот код следует поместить в css документ,отвечающий за стиль(обычно style.css,но могут быть и другие варианты),ну и добавить класс shadow к изображению.

Все,наслаждайтесь эффектом.

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

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

1
× Пришло новое сообщение