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

Как добавить тень к картинке с помощью CSSС приходом 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, с помощью которого можно привить код страницы и сразу видеть результат.С его помощью оч.удобно настраивать тень,и не только.

Комментарии

  • 01.11.2010 в 12:13
    Permalink

    Сильно обалденная статья! Автор делайте статьи в том же стиле.

    Ответить
  • 25.12.2010 в 17:35
    Permalink

    Гугл хром-не работает) Посмотрел код элемента в css файле, по хрому ничего не наложено на картинку. Проверяй)

    Ответить
  • 22.06.2012 в 11:25
    Permalink

    Пробую — не получается, в css файл вставил код, а что прописать у картинки? Помогите дураку, пожалуйста)

    Ответить
    • 28.06.2012 в 22:17
      Permalink

      картинке нужно прописать класс, который вы указали в css
      например, в css так
      .myclass{
      shadow….
      }
      тогда у картинки должно быть прописано class=»myclass»

      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>