Добавление тени
Тень для блока делается с помощью свойства box-shadow, при этом тень повторяет форму блока. Так, если сделать блок со скруглёнными уголками через border-radius, то тень тоже будет со скруглением.
В некоторых ситуациях box-shadow уже недостаточно, когда мы хотим сделать тень сложной формы, например, имитирующей приподнятые уголки (рис. 1).
Рис. 1. Блок с тенью
Для создания подобных теней мы добавляем два псевдоэлемента через ::before и ::after, для них ставим box-shadow и позиционируем нужным нам образом. Окончательно опускаем псевдоэлементы ниже блока с помощью свойства z-index со значением -1.
Если для наглядности окрасить псевдоэлементы фоновым цветом и поставить их вперёд, то получим вид блоков как на рис. 2.
Рис. 2. Положение псевдоэлементов для создания тени
В примере 1 показано добавление тени с помощью ::before и ::after.
Пример 1. Создание тени
Для создания разных теней можно воспользоваться следующими визуальными генераторами.
- coveloping.com/tools/css-box-shadow-generator
- developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator
См. также
- box-shadow
- relative и absolute
- z-index
- Аккордеон меню
- Добавление треугольника
- Использование в вёрстке
- Не только текст
- Нормальное позиционирование
- Относительное позиционирование
- Очистка float
- Подробнее о позиционировании
- Поток
- Псевдоэлемент ::after
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Свойства позиционирования
- Спойлер