Неоморфізм та Soft UI: мистецтво тонких тіней

Неоморфізм (або soft UI) - це дизайнерський тренд, який створює м'які, витиснуті форми, які здаються плаваючими над фоном або вдавленими в нього. Це все про створення реалістичної глибини за допомогою тонких тіней та підсвічувань. Давайте освоїмо цей елегантний стиль дизайну.

Анатомія неоморфізму

Неоморфні елементи мають три ключові характеристики:

Базова неоморфна кнопка

Основа неоморфізму - подвійні box-shadows:

.neuro-button {
  background: #e0e5ec;
  border: none;
  padding: 20px 40px;
  border-radius: 50px;
  box-shadow:
    9px 9px 16px rgba(163, 177, 198, 0.6),
    -9px -9px 16px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}
.neuro-button:hover {
  box-shadow:
    6px 6px 12px rgba(163, 177, 198, 0.6),
    -6px -6px 12px rgba(255, 255, 255, 0.5);
}
.neuro-button:active {
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.5);
}

Ефект натискання/вдавлення

Створіть ілюзію натиснутих кнопок або полів вводу:

.neuro-input {
  background: #e0e5ec;
  border: none;
  padding: 15px 20px;
  border-radius: 15px;
  box-shadow:
    inset 6px 6px 12px rgba(163, 177, 198, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.5);
}
.neuro-input:focus {
  outline: none;
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.6);
}

Неоморфна картка

Картки ідеально підходять для демонстрації неоморфного дизайну:

.neuro-card {
  background: #e0e5ec;
  padding: 30px;
  border-radius: 20px;
  box-shadow:
    12px 12px 24px rgba(163, 177, 198, 0.4),
    -12px -12px 24px rgba(255, 255, 255, 0.4);
}
.neuro-card-inner {
  background: #e0e5ec;
  padding: 20px;
  border-radius: 15px;
  box-shadow:
    inset 3px 3px 6px rgba(163, 177, 198, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.3);
}

Перемикач

Створіть красиві неоморфні перемикачі:

.neuro-toggle {
  width: 80px;
  height: 40px;
  background: #e0e5ec;
  border-radius: 40px;
  position: relative;
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.5),
    inset -4px -4px 8px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}
.neuro-toggle-knob {
  width: 32px;
  height: 32px;
  background: #e0e5ec;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  box-shadow:
    4px 4px 8px rgba(163, 177, 198, 0.6),
    -4px -4px 8px rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}
.neuro-toggle.active .neuro-toggle-knob {
  left: 44px;
  box-shadow:
    4px 4px 8px rgba(102, 126, 234, 0.4),
    -2px -2px 6px rgba(255, 255, 255, 0.8);
}

Розрахунок ідеальних тіней

Формула для неоморфних тіней:

Позиція джерела світла: Зверху-ліворуч (за замовчуванням)

• Темна тінь: Знизу-праворуч, зміщення = позитивний X, позитивний Y
• Світла тінь: Зверху-ліворуч, зміщення = негативний X, негативний Y

Зміщення: 5-15px (менше для тонкого, більше для драматичного)
Розмиття: 2x значення зміщення
Непрозорість: 0.15-0.6 (регулюйте на основі фону)

Кольорова палітра для неоморфізму

Неоморфізм найкраще працює з нейтральними, приглушеними кольорами:

:root {
  --neuro-light: #e0e5ec;
  --neuro-dark: #a3b1c6;
  --neuro-white: #ffffff;
  --shadow-dark: rgba(163, 177, 198, 0.6);
  --shadow-light: rgba(255, 255, 255, 0.5);
}

Неоморфізм у темному режимі

Адаптуйте неоморфізм для темних фонів:

[data-theme="dark"] {
  --neuro-bg: #2d3142;
  --shadow-dark: rgba(20, 23, 34, 0.8);
  --shadow-light: rgba(77, 82, 102, 0.4);
}
.neuro-dark {
  background: #2d3142;
  box-shadow:
    8px 8px 16px rgba(20, 23, 34, 0.8),
    -8px -8px 16px rgba(77, 82, 102, 0.4);
}

Інтерактивні стани

Показуйте зворотний зв'язок з переходами тіней:

.neuro-interactive {
  background: #e0e5ec;
  padding: 20px;
  border-radius: 15px;
  box-shadow:
    8px 8px 16px rgba(163, 177, 198, 0.5),
    -8px -8px 16px rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  cursor: pointer;
}
.neuro-interactive:hover {
  box-shadow:
    12px 12px 24px rgba(163, 177, 198, 0.5),
    -12px -12px 24px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
.neuro-interactive:active {
  box-shadow:
    inset 6px 6px 12px rgba(163, 177, 198, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.5);
  transform: translateY(0);
}

Проблеми доступності

Неоморфізм має природні проблеми з доступністю:

Рішення:

.neuro-accessible {
  box-shadow:
    8px 8px 16px rgba(163, 177, 198, 0.6),
    -8px -8px 16px rgba(255, 255, 255, 0.6);
}
.neuro-accessible:focus {
  outline: 3px solid #667eea;
  outline-offset: 4px;
}
.neuro-text {
  color: #4a5568;
  font-weight: 600;
}

Коли використовувати неоморфізм

Гарні випадки використання:

• Картки панелі управління
• Панелі налаштувань
• Музичні плеєри
• Інтерфейси розумного дому
• Мінімалістичні портфоліо

• Інтерфейсів високої щільності
• Критично важливих для доступності додатків
• Контенту з великою кількістю тексту
• Дизайнів mobile-first (може бути важко побачити на сонячному світлі)

Найкращі практики

Висновок

Неоморфізм - це красивий дизайнерський тренд при продуманому використанні. Він створює тактильне, преміальне відчуття, з яким користувачі люблять взаємодіяти. Однак завжди ставте доступність та зручність використання вище естетики. Використовуйте неоморфізм як акцент, а не як основу.