CSS3 Свойство box-shadow

При недавнем небольшом редизайне проекта решил отказаться от поддержки IE. Верстка по-прежнему осталась кроссбраузерной, как и работа скриптов, но некоторые декоративные эффекты теперь доступны только для нормальных браузеров. В данном случае я веду речь о поддержке CSS3, который постепенно ввожу в употребление. И действительно, почему когда большинство нормальных браузеров уже поддерживают третью спецификацию каскадных стилей, мы должны использовать технологии «каменного века», перегружая страницу и заставляя пользователя тянуть лишние килобайты кода для «фиксов» хромого на обе ноги браузера?

Далее поведу речь о создании тени вокруг изображений (и других элементов) с использованием свойства CSS3 box-shadow.

В общем случае синтаксис box-shadow выглядит так:

box-shadow: inset || [ <length> <length> <length>? <length>? || <color> ]

• Первое length задает смещение тени по оси X (горизонтали). Может задаваться в любых допустимых единицах измерения CSS Положительное значение задает смещение вправо, отрицательное – смещение влево;
• Второе length задает смещение по оси Y (вертикали). Положительное значение соответствует смещению вниз, отрицательное – вверх;
• Значение третьего length определяет радиус размытия. Отрицательные значения недопустимы;
• Четвертое length-значение – радиус растяжения тени. Положительные значения растягивают тень во всех направлениях, отрицательные сужают;
• color – базовый цвет тени;
• Если указано ключевое слово inset, тень будет направлена внутрь элемента.

И небольшая демонстрация свойства box-shadow. Работает в браузерах Firefox, Safari и Chrome.

А для «прихильників» браузера Internet Explorer даю картинку :)

Стили CSS3:

#example-box-shadow img {
  margin-left:0.7em;
  padding:3px;
  border: 1px solid #1A3457;
  box-shadow: 0 0 5px #1A3457;/* Каноническое задание */
  -webkit-box-shadow: 0 0 5px #1A3457; /* Safari, Chrome */
  -moz-box-shadow: 0 0 5px #1A3457; /* Firefox */
}
/* Тень смещена вправо-вниз */
#example-box-shadow img.sh-rb {
  box-shadow: 5px 5px 5px #1A3457;
  -webkit-box-shadow: 5px 5px 5px #1A3457; /* Safari, Chrome */
  -moz-box-shadow: 5px 5px 5px #1A3457; /* Firefox */
}
/* Тень смещена влево-вверх */
#example-box-shadow img.sh-lt {
  box-shadow: -5px -5px 5px #1A3457;
  -webkit-box-shadow: -5px -5px 5px #1A3457; /* Safari, Chrome */
  -moz-box-shadow: -5px -5px 5px #1A3457; /* Firefox */
}

Код HTML:

<img class="sh-lt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />
<img class="sh-rb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />

И в качестве бонуса CSS3 код для расширения тени при наведении указателя мыши:

#example-box-shadow img:hover {
  box-shadow: 0 0 7px 1px #1A3457;
  -webkit-box-shadow: 0 0 7px 1px #1A3457;
  -moz-box-shadow: 0 0 7px 1px #1A3457;
}

Приверженцы Internet Explorer этого не увидят.

UPD: Еще по теме CSS3: Свойство border-radius.

UPD: Ну и дабы развеяться: Топ 10 «креативных» дизайнов обложек «Преступление и наказание»

© 2009 dotrb.blogspot.com