Маленькая подсказка: Делайте правильно скругленные углы

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

Это может показаться незначительным для многих из вас, но я так часто с этим сталкиваюсь, что я считаю нужным рассмотреть этот вопрос. Мы называем эту проблему неправильно вложенными углами; небольшая деталь, которая может разрушить замечательный дизайн!

Кто тут педантичен?

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

Точно, вторая

Сделайте по-простому: если у вас есть два скругленных угла, которые находятся параллельно друг другу, внешний угол должен иметь больший радиус, который обтекает окружность внутреннего угла.

Не углубляясь в математические подробности, попробуйте представить центральную точку, основу, которую будет огибать ваш первичный радиус. Затем используйте эту же основу для внешнего, второго радиуса.

Придайте форму вашим окружностям таким образом, и вы обнаружите, что конечный результат стал намного более приятным взгляду.

Сгибаем трубы

Думайте об эффекте, который вы создаете, как о сгибании труб:

Посчитайте

Интерфейсы, созданные на html/css, могут часто усложнить задачу по закруглению углов. Вспомните о формах или кнопках.

Здесь невозможно быть излишне точным; разница между обоими border radius должна равняться промежутку между ними. Просто!

И оно тоже может быть адаптивным, например:

<div class="outer">
  <div class="inner">

	</div><!--/ inner-->
</div><!--/ outer-->

.inner {
    width: 5em;
    height: 5em;
    background: black;
 
    border-radius: 1em;
}
 
.outer {
	display: inline-block;
    background: lightblue;
 
    padding: 3em;
    border-radius: 4em; /*offset + radius of .inner*/
}

Отлично закругленные углы (смотрите демо).

Исключения

Как и везде в дизайне, четких правил не существует и здесь. Вы всегда найдете исключения. Это дело ощущений.

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