Добавление тени

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

В некоторых ситуациях box-shadow уже недостаточно, когда мы хотим сделать тень сложной формы, например, имитирующей приподнятые уголки (рис. 1).

Блок с тенью

Рис. 1. Блок с тенью

Для создания подобных теней мы добавляем два псевдоэлемента через ::before и ::after, для них ставим box-shadow и позиционируем нужным нам образом. Окончательно опускаем псевдоэлементы ниже блока с помощью свойства z-index со значением -1.

Если для наглядности окрасить псевдоэлементы фоновым цветом и поставить их вперёд, то получим вид блоков как на рис. 2.

Положение псевдоэлементов для создания тени

Рис. 2. Положение псевдоэлементов для создания тени

В примере 1 показано добавление тени с помощью ::before и ::after.

Пример 1. Создание тени

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тень</title>
  <style>
   .shadow {
    background: #f7f7f7; /* Цвет фона */
    border: 1px solid #ccc; /* Параметры рамки */
    padding: 20px; /* Поля вокруг текста */
    position: relative; /* Относительное позиционирование */
   }
   .shadow::before, .shadow::after {
    content: ''; /* Вывод тени */
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение снизу */
    left: 10px; /* Положение слева */
    width: 50%; /* Ширина тени */
    max-width: 300px; /* Максимальная ширина тени */
    height: 15px; /* Высота тени */
    box-shadow: 0 15px 10px rgba(0,0,0,0.5); /* Тень */
    transform: rotate(-3deg); /* Поворот */
    z-index: -1; /* Опускаем ниже блока */
   }
   .shadow::after {
    transform: rotate(3deg); /* Поворот */
    right: 10px; /* Положение справа */
    left: auto; /* Восстанавливаем положение слева */
   }
  </style>
 </head>
 <body>
  <div class="shadow">
   Септаккорд полифигурно начинает форшлаг.
  </div>
 </body>
</html>

Для создания разных теней можно воспользоваться следующими визуальными генераторами.

тень