Як правильно скругляти кути: border-radius для плавних вкладених елементів

Чому border-radius важливий

Закруглені кути роблять будь-який дизайн дружнім і акуратним, але коли маєш справу з кількома вкладеними контейнерами, все може виглядати трохи… невпорядковано. Якщо не регулювати радіус на кожному рівні, то або кути виглядатимуть дивно обрізаними, або взагалі не буде округлення.

Давайте розглянемо простий трюк, який допоможе зберегти плавність і послідовність округлення кутів, незалежно від кількості рівнів.

Базова Формула: Зовнішній радіус = Внутрішній радіус + відступ

Це базова формула, яка забезпечує рівномірне округлення кутів:

• Почніть з внутрішнього радіусу (найменший кут у вашому дизайні).
• Потім додайте відступ до цього радіусу, щоб визначити радіус зовнішнього кута.

Наприклад, якщо внутрішній контейнер має радіус 24px і ви хочете 8px відступу, встановіть радіус зовнішнього контейнера рівним:

24px + 8px = 32px.

Легко, правда?

Ця формула забезпечує вирівнювання кожного шару округлення, створюючи гармонійний і плавний вигляд. Але що станеться, якщо додати ще шари?

Ідеальне вкладене скруглення в CSS

Розглянемо простий приклад CSS. Припустимо, ми хочемо оформити два вкладених блоки з округленими кутами. Зовнішній блок має border-radius 24px та padding 8px. Використовуючи попередню формулу, можна зробити висновок, що внутрішній блок має border-radius 16px.

.outer {
  border-radius: 24px;
  padding: 8px;
}

.inner {
  border-radius: 16px;
}

Вкладені контейнери: чому не завжди можна використовувати цю формулу

Припустимо, ви хочете створити картку з декількома шарами:

1. Перший контейнер: Радіус = 24px, Відступ = 8px
2. Другий контейнер (всередині першого): Радіус = 24px − 8px = 16px
3. Третій контейнер (всередині другого): Радіус = 16px − 8px = 8px
4. Четвертий контейнер (всередині третього): Радіус = 8px − 8px = 0px

Ой. Досягнувши найвнутрішнього шару, кути стають гострими. Це зовсім не той плавний вигляд, якого ви прагнули.

Отже, як це виправити?

Замість того, щоб щоразу віднімати повний відступ, спробуйте зменшувати його пропорційно. Ось що я маю на увазі:

1. Перший шар: Радіус = 24px, Відступ = 8px
2. Другий шар: Радіус = 24px − 8px = 16px
3. Третій шар: Радіус = 16px − (8px / 2) = 12px
4. Четвертий шар: Радіус = 12px − (8px / 2) = 8px

Зменшуючи відступ вдвічі на кожному наступному рівні, кожен шар зберігає частину ефекту округлення, завдяки чому ви не отримуєте різкого переходу до гострих кутів. Це забезпечує поступове зменшення, а не різкий перехід, що виглядає набагато краще.

Приклад з реального життя: розробка карткового компонента

Припустимо, ви розробляєте картковий компонент з трьома шарами:

• Зовнішня картка має радіус 24px з 8px відступу.
• Усередині, зона контенту має радіус 16px з 6px відступу.
• Всередині цього — іконка або кнопка з радіусом 10px.

Замість того, щоб кути миттєво переходили від округлих до гострих, кожен шар плавно перетікає в наступний. Таким чином, ваш дизайн виглядає цілісним і продуманим.

Навіщо клопотатися? Сила послідовних кутів

Послідовні кути можуть здатися незначними, але вони мають велике значення. У дизайні інтерфейсу все зводиться до деталей, і візуальна гармонія елементів створює враження цілісності. Користувачі можуть не усвідомлювати окремо border-radius кожного елемента, але загальна гармонія робить дизайн більш акуратним та професійним.

Професійні поради щодо роботи з border-radius

1. Почніть з великого: Використовуйте більший радіус на зовнішньому шарі, щоб було простір для плавного зменшення.
2. Грайте з відступами: Не обмежуйте себе одним і тим самим відступом для кожного шару. Спробуйте зменшувати його поступово, щоб зберегти послідовність округлення.
3. Обмежте кількість шарів: Занадто багато вкладених шарів можуть створити перевантаження. Найкращий результат досягається з двома або трьома шарами.
4. Перевіряйте в інструментах дизайну: Програми на зразок Figma або Sketch ідеально підходять для візуалізації налаштувань border-radius. Ви можете експериментувати з числами та бачити, як кожен шар формує загальний вигляд у реальному часі.

Підсумок

Досягнення ідеального border-radius для вкладених контейнерів – це питання балансу. Завдяки цій простій формулі та кільком коригуванням ви зможете зберегти дизайн плавним і професійним. Наступного разу, працюючи з округленими кутами, пам’ятайте: додайте відступ до внутрішнього радіусу для зовнішнього шару і коригуйте за потребою для глибших рівнів.

З невеликими зусиллями ви зможете округлювати кути як професіонал!

Якщо вам цікавіше дізнатися більше про тему скруглення кутів, рекомендую прочитати статтю Чому ми скругляємо кути

Чому ми скругляємо кути

Dinozavrix ・ Серп 28 '23

#ui #ux