Далее поведу речь о создании тени вокруг изображений (и других элементов) с использованием свойства 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
