Главная > CSS/Style Sheets > Создаем привлекательные эффекты с помощью CSS3 box-shadow

Создаем привлекательные эффекты с помощью CSS3 box-shadow


24 июля 2012, 16:55. Разместил: Design FactoRy
Тень и внутренняя тень – это пара эффектов, с которыми вы можете быть знакомыми еще из программы Photoshop. Но сейчас, когда CSS3 во всех заголовках, нам все меньше и меньше приходится обращаться за помощью к Photoshop, и даже эти эффекты сегодня можно добавить при помощи чистого кода.

Создаем привлекательные эффекты с помощью CSS3 box-shadow

Параметр box-shadow

Параметр box-shadow позволяет нам добавлять несколько теней (внутренних или внешних) к блочным элементам. Для того чтобы сделать это, нам потребуется указать значения color, size, blur и offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Ядерная наука?

Не совсем. Давайте посмотрим небольшой пример:

box-shadow: 3px 3px 10px 5px #000;

Это объявление CSS сгенерирует для нас следующую тень:

Создаем привлекательные эффекты с помощью CSS3 box-shadow

* положительное значение горизонтального смещения позволяет нам отодвинуть тень от блока в правую сторону, отрицательное – в левую.
* следующее значение отвечает за вертикальное смещение. Положительное значение вертикального отступа просто смещает тень элемента вниз, отрицательное - вверх.
* нам запрещено пользоваться отрицательными значениями для радиуса размытия. Чем больше значение – тем больше тень размыта, как это можно наблюдать выше.
* положительные значения дистанции размытия позволяют вам увеличить размытие по указанному радиусу.
* отрицательные значения позволяют нам сделать тень более четкой.
* параметр color отвечает за цвет тени.
* ключевое слово inset (которое мы опустили выше) позволяет нам изменять тип тени с внутренней на внешнюю.

Вышеприведенная теория – это всего лишь небольшая часть информации, и если вам хочется узнать подробнее, то вам следует ознакомиться со спецификацией W3C.

Довольно теории, давайте творить!

Теперь же давайте посмотрим, какие преимущества можно извлечь из этого параметра CSS3. Ниже мы продемонстрируем вам, каким образом вы можете улучшить собственные дизайны с помощью box-shadow.

Добавляем ощущение глубины

Ссылка на материал

Создаем привлекательные эффекты с помощью 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 box-shadow

Следующие статьи нас вдохновляют:

* Тени на 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 и при этом не преломлять отображение разметки в старых браузерах.

* Посмотреть демо
Вернуться назад