Создание тени CSS3 с исключением одной стороны: руководство

Быстрый ответ

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

.box {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
}

Нулевое горизонтальное смещение и отрицательный радиус распространения позволят устранить верхнюю тень. Настройку прозрачности можно осуществлять через альфа-канал в формате RGBA.

Анатомия box-shadow

Эксперименты с отрицательным радиусом

Применение отрицательного радиуса позволяет уменьшить тень до размеров блока, тем самым удалив её с одной из сторон:

.negative-spread {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .5);
  /* 50 оттенков, убирающих тень, если можно так сказать. */
}

Подробнее об этом расскажет наш спикер на видео

Тени, соблюдающие границы

Псевдоэлементы :before и :after могут добавлять тени, не влияя на основное содержимое. Это позволяет манипулировать тенями, не изменяя структуру:

.shadow::after {
  content: '';
  position: absolute;
  ...
  box-shadow: ...;
  /* Тень, веерающая личное пространство. */
}

Разделение теней в вкладках

Использование вкладок позволяет разбить тени, не предоставляя активной вкладке теневого оформления. Для этого используется свойство overflow: hidden в контейнере:

.tab-container {
  overflow: hidden;
  /* Сокрытие табличных теней */
}
.tab {
  display: inline-block;
  position: relative;
  box-shadow: ...;
  /* Мастера теневого дизайна */
}
.active-tab {
  box-shadow: none;
  /* Невидимая тень активного элемента */
}

Продвинутые способы работы с тенями

Обрезание теней с помощью clip-path

Свойство clip-path позволяет руководить формой тени. Для этого применяется функция inset(), и о совместимости при этом следует помнить:

.clipped-shadow {
  clip-path: inset(10px 0 0 0);
  /* Формирующий подход */
}

Позиционирование тени с использованием псевдоэлементов

Псевдоэлементы с абсолютной позицией позволяют задать различные эффекты тени. Контроль разменов их позволяет управлять областью тени:

.shadow::before {
  content: '';
  position: absolute;
  ...
  /* Детализированный контроль тени */
}

Визуализация

Представьте себе рамку, окружённую равномерной тенью:

Рамка с тенью:
🖼️⬛⬛⬛
⬛   ⬛
⬛⬛⬛⬛

Цель — исключить тень с одной из сторон:

Эффект отсутствия тени:
🖼️⬛⬛🌟
⬛   ⬛
⬛⬛🌟🌟
# Звёздочки (🌟) указывают на сторону без тени.

В CSS это достигается путём отключения тени на нужной стороне:

box-shadow: 10px 0 5px -5px gray, 
            -10px 0 5px -5px gray, 
            0 10px 5px -5px gray;
/* Как выключатель для одной стороны тени. */

Динамическое регулирование теней

Тень при наведении

Использование динамических теней позволяет обогатить интерактивности элементов. При наведении курсора добавьте тени с помощью селектора :hover:

.tab-link:hover {
  box-shadow: ...;
}
/* Выделение при наведении */

Отступление тени от активного элемента

Не дайте теням перекрывать активные элементы. Требуется скорректировать высоту зоны с содержимым:

.content-area {
  height: ...;
  /* Поднятие активного содержимого на новый уровень. */
}

Настройка теней с учётом отступов и полей

Используйте margin и padding для внимательной настройки положения теней. Это особенно значимо при формировании панелей навигации и вкладочных интерфейсов:

.nav-item {
  margin: ...;
  padding: ...;
}
/* Обустройство теней при благоприятной конфигурации */

Полезные материалы

1. box-shadow – CSS: Каскадные таблицы стилей | MDN — Полное руководство по свойству box-shadow.
2. box-shadow | CSS-Tricks — Полезные советы и методы создания реалистичных теней.
3. Эффекты теней CSS — Учебник по созданию многообразия эффектов теней.
4. css – Эффект контура для текста – Stack Overflow — Дискуссия о способах создания теней, котрые не влияют на компоновку текста.
5. Box-shadow, одна из новых возможностей CSS3 – CSS3 . Info — Многосторонний анализ применения box-shadow.
6. Добавление теней к SVG-иконкам с помощью CSS и SVG-фильтров | CSS-Tricks — Руководство по созданию многоуровневых теней для SVG-элементов.
7. Дизайн гибкой CSS-круговой диаграммы с SVG — Smashing Magazine — Использование теней для дизайна CSS-круговых диаграмм.