Майстерність CSS Box Shadow: Повний гід

CSS box-shadow - одна з найпотужніших властивостей для створення глибини та візуальної ієрархії у веб-дизайні. Цей всеосяжний гід проведе вас від базових тіней до просунутих професійних технік.

Розуміння синтаксису Box Shadow

Властивість box-shadow приймає кілька значень:

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;

Базові приклади

Проста тінь:

box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

Піднята тінь:

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

Просунуті техніки тіней

1. Багатошарові тіні

Поєднання кількох тіней створює більш реалістичну глибину:

box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.12),
  0 1px 2px rgba(0, 0, 0, 0.24);

2. Ефект неоморфізму

Створіть популярний вигляд м'якого UI:

background: #e0e5ec;
box-shadow:
  9px 9px 16px rgb(163, 177, 198, 0.6),
  -9px -9px 16px rgba(255, 255, 255, 0.5);

3. Внутрішні тіні

Використовуйте inset для ефектів глибини:

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

4. Кольорові тіні

Підбирайте кольори тіней до вашого дизайну:

box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);

Material Design рівні піднесення

Різні рівні тіней для UI ієрархії:

Рівень 1 (Картки):

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

Рівень 2 (Підняті):

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

Рівень 3 (Плаваючі):

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Поради щодо продуктивності

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-2px);
}

.animated-shadow {
  will-change: box-shadow;
}

Поширені помилки

• Занадто темні тіні - Використовуйте нижчу прозорість для тонкості
• Однакові тіні - Варіюйте розмір тіні для різних елементів
• Без blur - Завжди додавайте трохи розмиття для реалістичності
• Неправильний spread - Негативний spread може створювати цікаві ефекти

Практичні випадки використання

Піднесення картки

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Глибина кнопки

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Ефект спливаючого тексту

.text-popup {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

Висновок

Опанування box-shadow відкриває безмежні можливості для створення глибини та візуального інтересу у ваших дизайнах. Використовуйте наш Генератор Box Shadow для експериментів з різними комбінаціями та знаходження ідеальної тіні для вашого проекту.

Пов'язані інструменти:

• Генератор CSS градієнтів - Створюйте красиві фони
• Бібліотека анімацій - Оживіть ваші тіні