Внешние и внутренние тени раньше создавались только с помощью изображений. И сейчас еще есть веб-разработчики, которые не знают, что для создания необычных теней уже не нужна программа Photoshop и сделать тень сложной формы теперь можно с помощью только CSS3.

Посмотрите демонстрацию работы и начнем:

Демонстрация работы

Свойство тени блока 

Свойство тени блока позволяет добавить внешние и внутренние тени блочному элементу. Чтобы создать тень блока, нужно задать следующие значения: цвет, размер, размытие и смещение.

Вот пример записи свойства тени блока:

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

Эти значения создадут следующий эффект:

Рассмотрим эти значения по порядку их расположения в примере выше:

• Положительное значение горизонтального смещения создает тень, смещенную вправо, а отрицательное — влево.
• Второе значение — смещение по вертикали. Положительное значение смещает тень вниз, а отрицательное — вверх.
• Нельзя использовать отрицательное значение для радиуса размытия. Чем больше это значение, тем более размыты углы тени, как видно на изображении выше.
• Положительное значение расстояния, на которое распространяется тень, увеличивает тень на заданное значение во всех направлениях. Отрицательное значение уменьшает размер тени.
• Цвет задает цвет тени.
• Значение inset, которого нет у тени на изображении выше, если указано, меняет тень блока с внешней на внутреннюю.

Если хотите узнать о свойстве тени блока больше, можете почитать об этом в спецификации W3C.

Давайте создадим тени 

Давайте рассмотрим, как можно воспользоваться этим отличным свойством CSS3. Ниже будет показано, как можно сделать дизайн сайта интересней с помощью эффектных теней блока.

Добавим глубину основному блоку сайта

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);
}

Добавим объем блоку

#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);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}
#box:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Вот несколько уроков, которые нас вдохновили:

• Divya Manian — Создание теней блока с использованием CSS3
• Nicolas Gallagher — Создание теней блока без использования изображений с использованием CSS

Короткие рекомендации 

Попробуйте использовать цветовую модель RGBa для создания теней. Свойство тени блока может использовать значения цвета RGBa CSS3 для создания теней с разной прозрачностью. Если браузер поддерживает свойство тени блока, то он поддерживает и цветовую модель RGBa.

Используйте несколько теней в одной записи, разделяя их запятой:

box-shadow: 3px 3px 10px 5px #000,
            0 0 4px rgba(0, 0, 0, .5) inset;

Поддержка браузерами 

Свойство тени блока поддерживают буквально все современные браузеры, кроме браузера Opera Mini, причем современным версиям браузеров даже не нужны приставки производителей. Но если Вам нужно поддерживать старые версии браузеров, можете использовать для этого приставки производителей.

Заключение 

Постарайтесь не использовать на создаваемых Вами сайтах тени, созданные с помощью изображений. Даже очень необычные тени можно создать с помощью свойства тени блока. И важно использовать эту возможность, чтобы готовый сайт быстро загружался и благодаря этому занимал более высокие позиции в поисковой выдаче. Также верстка сайта с использованием свойства тени блока не будет разрушаться даже в старых версиях браузеров или в браузерах, не поддерживающих это свойство.

Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Catalin Rosu

Смотрите также:

• Скошенные углы и отрицательные радиусы границ с использованием градиентов CSS3
• Фоновые текстуры в виде шахматной доски и полос с использованием градиентов CSS3
• Создание рейтинга в виде звезд с использованием только CSS