среда, 5 августа 2009 г.

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

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.

Crime and PunishmentCrime and PunishmentCrime and Punishment


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

box-shadow


Стили 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


9 Комментариев :

recens комментирует...

Хорошая статья.
Кстати, если в этом свойстве указать параметр inset, то можно добиться весьма интересных результатов.
Я писала об этом здесь, посмотрите, если вам интересно.

Croaker комментирует...

Спасибо, recens, весьма познавательно.

Анонимный комментирует...

реализация для ИЕ есть, причем 6+

Croaker комментирует...

Для IE — Это опять-таки "костыли"

EZ-Web комментирует...

Стили CSS3:

#example-box-shadow img {
margin-left:0.7em;
padding:3px;
border: 1px solid #1A3457;
box-shadow: 0 0 5px #1A3457; /* Каноническое задание */ - почему только три значения тени? хотя должно быть четыре?

Croaker комментирует...

EZ-Web да, все верно. В данном случае по порядку слева направо:
смещение тени по горизонтали: 0
смещение тени по вертикали: 0
радиус размытия: 5px
четвертым значением могло бы быть значение радиуса растяжения тени, но раз оно не задано, то считается нулевым.

Аналогично такой записи:
box-shadow: 0 0 5px 0 #1A3457;

Ranerg комментирует...

Inset- в кнопках этим можно будет создать обьемный эффект:)

Анонимный комментирует...

Странно, в 10 ФФ и 14 хром не хотят работать с box-shadow, а опера поддерживает ... может подскажете куда копать чтобы работало?

Веб дизайн -ер комментирует...

Реализация для ИЕ до 9 была через фильтры, что дико грузило систему. В 9 же есть полноценная поддержка данного свойства - дождались :) Ликуйте и используйте, если от Вас не требуют поддержки в ИЕ 6-8.

Отправить комментарий

Жги!