Как сделать закругленные углы CSS

В этой статье мы заденем вопрос о закругленных углах, эта небольшая деталь, которая может разрушить блестящий дизайн!

Как обратить внимание на точность?

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

css закругленные углы css border radius

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

Не будем вдаваться в математические формулы, попытаемся визуализировать центральную точку, «начало», вокруг которой будут расположены ваши кривые. Теперь с помощью той же точки, только вокруг внешнего угла:

css круглые углы

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

Изгиб труб

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

css углы

Точность как в математике

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

Это не трудно, главное, что бы разница малого и большого радиуса двух объектов была равна.

css закругление

Но не делайте слишком круглые углы. Например:

    <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*/
}

Исключения

Как и во всех вопросах в области дизайна, нет конкретных правил - вы всегда сможете найти исключения.

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

 

Использование правильной технологии

Вместо того что бы смотреть на неудачные примеры с плохими углами, давайте рассмотрим вдохновляющие работы на Dribbblers, которые сделаны правильно!

css закругленные углы
 
css закругленные углы
 
css закругленные углы
 
css закругленные углы
 
css закругленные углы
 
css закругленные углы
 
css закругленные углы
 
css закругленные углы
 

Перевод статьи Quick Tip: Rounded Corners Done Right

Тэги: styleradius

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.