Параметр box-shadow
Параметр box-shadow позволяет нам добавлять несколько теней (внутренних или внешних) к блочным элементам. Для того чтобы сделать это, нам потребуется указать значения color, size, blur и offset.
<shadow> = inset? && [ <length>{2,4} && <color>? ]
Ядерная наука?
Не совсем. Давайте посмотрим небольшой пример:
box-shadow: 3px 3px 10px 5px #000;
Это объявление CSS сгенерирует для нас следующую тень:
* положительное значение горизонтального смещения позволяет нам отодвинуть тень от блока в правую сторону, отрицательное – в левую.
* следующее значение отвечает за вертикальное смещение. Положительное значение вертикального отступа просто смещает тень элемента вниз, отрицательное - вверх.
* нам запрещено пользоваться отрицательными значениями для радиуса размытия. Чем больше значение – тем больше тень размыта, как это можно наблюдать выше.
* положительные значения дистанции размытия позволяют вам увеличить размытие по указанному радиусу.
* отрицательные значения позволяют нам сделать тень более четкой.
* параметр color отвечает за цвет тени.
* ключевое слово inset (которое мы опустили выше) позволяет нам изменять тип тени с внутренней на внешнюю.
Вышеприведенная теория – это всего лишь небольшая часть информации, и если вам хочется узнать подробнее, то вам следует ознакомиться со спецификацией W3C.
Довольно теории, давайте творить!
Теперь же давайте посмотрим, какие преимущества можно извлечь из этого параметра CSS3. Ниже мы продемонстрируем вам, каким образом вы можете улучшить собственные дизайны с помощью box-shadow.
Добавляем ощущение глубины
Ссылка на материал
body:before
{
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
Тени
Следующие статьи нас вдохновляют:
* Тени на CSS3 (автор Дивья Маньян)
* CSS-тени без изображений (автор Николас Гэллахер)
#box
{
position: relative;
width: 60%;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
margin: 60px auto;
}
#box:before, #box:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#box:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Подсказки
Попробуйте усовершенствовать тени в собственных проектах с помощью RGBa. Параметр box-shadow может быть использован при помощи CSS3 RGBa-цветов для создания теней разных уровней плотности. Если ваш браузер поддерживает параметр box-shadow, то он обязательно должен поддерживать режим RGBa.
Используйте несколько теней в одном CSS-объявлении:
box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;
Браузерная поддержка
* Internet Explorer 9/10
* Firefox (от 3.5)
* Safari/Chrome
* Opera (от 10.5)
В завершение
Мы рекомендуем вам использовать эти параметры уже с сегодняшнего дня, если до этого вы этого не делали. Почему? Да потому что вы можете использовать box-shadow и при этом не преломлять отображение разметки в старых браузерах.
* Посмотреть демо