H Что можно делать с помощью CSS Border-Radius? в черновиках Перевод

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

TL;DR: Когда вы используете восемь значений, задающих border-radius в CSS, вы можете создавать естественно выглядящие фигуры. Ничего себе. Нет времени читать? Мы сделали для вас наглядный инструмент. Вы найдете его здесь.

Введение

В рамках Frontend Conference в Цюрихе Рэйчел Эндрю рассказала о раскрытии возможностей CSS Grid Layout. В конце своего выступления она упомянула о старой особенности CSS, которая запала мне в голову: «Изображение настраивается с помощью хорошо поддерживаемого border-radius. Не забывайте, что старые свойства CSS все еще существуют и являются весьма полезными. Вам не нужно использовать что-то фантастическое для достижения эффекта». Вскоре после того, как я услышал это выступление, я подумал, что с помощью border-radius можно создать нечто гораздо большее, чем просто круги, и начал изучать возможности border-radius.

Освоение border-radius

Единственное значение
Начнем с основ. Надеюсь, это не утомит вас. Если вы знакомы с CSS, то вы слышали о свойстве border-radius. Оно существует уже несколько лет и в основном используется с одним значением, например, border-radius: 1em, став одним из самых обсуждаемых/ любимых свойств CSS3 с 2010 года, когда сайт css3please.com стал вашим лучшим другом.

Всякий раз, когда вы используете только единственное значение, все углы округляются в соответствии с ним:



Как видно из приведенного выше примера, наряду с фиксированными значениями длины, такими как px, rem или em, вы можете использовать проценты. Как правило, они используются для создания круга с border-radius 50%. Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете процентное значение для прямоугольника, у вас не будет симметричных углов. Ниже приведен пример, показывающий разницу между свойствами border-radius: 110px и border-radius: 30% применимо к прямоугольнику.


^{Заметьте, что углы на примере справа не симметричны. Мы вернемся к этому позже.}

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



Восемь значений, разделенных слешем (вот это представляет интерес)
Я думаю, что большинство из вас делали все то, о чем речь шла ранее. А вот сейчас мы добрались до наиболее захватывающей части. Что произойдет, если вы укажете до восьми значений, разделив их слешем? Давайте посмотрим, что говорит об этом спецификация
Таким образом, значения перед слешем отвечают за горизонтальные расстояния, тогда как значения после слеша определяют вертикальные длины. Но что это значит? Помните процентные значения для прямоугольных фигур? У нас были разные значения для вертикальных и горизонтальных расстояний и асимметрично закругленных углов – именно это вы и получите при использовании слеша.

Поэтому результаты будут совершенно разные при использовании свойства border-radius: 4em 8em и border-radius: 4em / 8em.


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

Откровенно говоря, фигуры, которые вы получаете, выглядят немного странно. Но помните круги, которые вы создали с помощью свойства border-radius: 50%. Вы получаете круг, поскольку оба значения, определяющие одну сторону, составляют 100% (50% + 50% = 100%), и не остается прямой линии, что напомнило бы вам первоначальный квадрат. Если применить эту же логику к синтаксису border-radius с восемью значениями, то можно создать фигуру, которая немного похожа на медиатор или органическую клетку:




^{В итоге получается пересечение четырех эллипсов, образующих конечную фигуру.}

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

(НЕ) перекрещивать лучи
Теперь, когда вы имеете представление о 8 значениях, вам станет немного грустно, потому что наш border-radius инструмент не дает возможности установить каждое значение по отдельности. Не сдавайтесь, вот версия 8-POINT-FULL-CONTROL.

Если вы достаточно взрослые, то можете вспомнить цитату из фильма 1984 г. Ghostbusters (Охотники за привидениями):

«Никогда не скрещивайте лучи!» — «Почему?» — «Будет плохо»

Здесь что-то похожее: если вы поменяете местами ползунки на одной стороне, то форма поведет себя… скажем, непредсказуемо. Посмотрите на это сами. Конечно, это не приведет к изменению заряда протонов, но не говорите, что я вас не предупреждал.

PS: Огромная благодарность simurai. В далеком 2010 г. он создал CSS3 BonBon Buttons. Хотя они и выглядят немного устаревшими, но это единственное место, где я случайно нашел информацию о слеш-синтаксисе.

Вот это крутое свойство в действии:

Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1500 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.