Как сделать гибкие эллипсы

Оцените материал
(0 голосов)

Проблема

Вероятно, вы замечали, что любой квадратный элемент, для которого определено достаточно большое значение  border-radius , можно превратить в круг с помощью примерно такого CSS-кода:
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= половины длины стороны */
Возможно, вы также замечали, что в подобной ситуации можно было бы указать любое значение радиуса больше  100px и все равно получить в результате круг. Причина объясняется в спецификации: Если сумма любых двух радиусов соседних рамок превышает размер поля рамки, пользовательские агенты должны пропорционально уменьшать используемые значениях всех радиусов рамки, чтобы наложения не происходило.
Однако часто бывает так, что указать точные значения ширины и высоты элемента невозможно, так как мы хотим, чтобы он подстраивался под свое содержимое, что может быть неизвестно наперед. Даже если мы проектируем статичный веб-сайт и его точное то содержимое определено заранее, не исключено, что в какой-то момент мы захотим модифицировать его или он будет отображаться с использованием резервного шрифта с другими метриками. В этом случае мы хотим, чтобы на выходе получался эллипс в ситуации, когда ширина и высота не равны между собой, и круг, когда они совпадают. Однако наш предыдущий код не способен обработать такой сценарий. Результирующая фигура для случая, когда ширина больше высоты, показана на рисунке. Можно
ли в принципе создавать эллипсы с помощью  border-radius , не говоря уже о том, чтобы делать их гибкими?

 

 

Решение

Этот факт не слишком известен, но свойство  border-radius способно принимать разные значения для горизонтального и вертикального радиуса, разделенные слешем (/). Это позволяет создавать эллиптическое скругление в углах элемента. Таким образом, если у нас есть элемент размером, скажем,  200px × 150px , то мы могли бы превратить его в эллипс, указав радиусы, равные половине ширины и высоты соответственно:
border-radius: 100px / 75px;
Результат вы можете видеть


Однако у этого подхода есть один крупный недостаток: если габаритные размеры элемента меняются, то и значения  border-radius также требуют корректировки. На рисунке ниже вы можете видеть, как то же определение свойства  border-radius работает с элементом размером  200px × 300px . Габариты элемента, меняющиеся в зависимости от содержимого, создают проблему.


Или нет? У  border-radius есть еще одна малоизвестная особенность: это свойство принимает не только абсолютные, но и процентные значения. Процентное значение разрешается в соответствующее габаритное значение: горизонтальный радиус определяет ширину, а вертикальный радиус определяет высоту. Это означает, что одни и те же процентные значения могут превращаться в разные значениягоризонтального и вертикального радиуса. Следовательно, для того чтобы получить гибкий эллипс, следует заменить оба радиуса значением  50% :
border-radius: 50% / 50%;
И так как составляющие до и после слеша теперь равны (несмотря на то, что в итоге они разрешаются в разные значения), мы можем дополнительно упростить код:
border-radius: 50%;
Результат — гибкий эллипс, определяемый всего лишь одной строкой CSS-кода, независимо от его фактической ширины и высоты.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/ellipse
Многие задаются вопросом, почему свойство border-radius получило именно такое название, ведь для того, чтобы оно работало, никакие рамки (border) не требуются. Казалось бы, corner-radius было бы намного более подходящим названием. Причина существования такого (заведомо сбивающего с толку) названия заключается в том, что border-radius скругляет углы поля рамки элемента. Если у элемента нет рамок, то это ни на что не влияет, но если рамки имеются, то скругляется внешний угол именно рамки. Внутренний угол подвергается меньшему скруглению (max(0,border-radius - border-width), если быть точными).

Полуэллипсы

Теперь, когда мы знаем, как с помощью CSS создавать гибкие эллипсы, естественным образом возникает вопрос: можно ли посредством CSS-кода рисовать и другие распространенные фигуры, такие как дуги эллипса? Давайте на мгновение задумаемся, что же такое половина эллипса.


Она симметрична относительно вертикальной оси, но не относительно горизонтальной оси. И даже если нам пока неизвестны точные значения  border-radius (при условии, что их вообще можно узнать), уже очевидно, что нам потребуются разные значения радиуса для каждого из углов. Однако пока что мы умеем задавать лишь одно значение для всех четырех углов. К счастью, синтаксис  border-radius намного более гибкий. Возможно, вы удивитесь, но  border-radius — это в действительности сокращение. На самом деле мы можем указать разные значения для всех четырех углов, к тому же сделать это можно двумя способами. Первый способ — использовать полную запись свойств, составляющих это сокращение:

‰ border-top-left-radius
‰ border-top-right-radius
‰ border-bottom-right-radius
‰ border-bottom-left-radius
Второй способ позволяет создавать более емкий код, так как подразумевает использование все того же сокращения  border-radius , но на этот раз с несколькими значениями, разделенными пробелами. Если указать четыре значения, то они будут применены к каждому из четырех углов по часовой стрелке, начиная с верхнего левого. Если указать меньше четырех значений, то они будут умножаться обычным способом, как принято в CSS, — аналогично тому, как это происходит со свойством  border-width . Три значения подразумевают, что четвертое совпадает со вторым. Два значения подразумевают, что третье совпадает с первым. На рисунке ниже  вы найдете визуальное объяснение того, как это работает. Мы можем даже указать разные горизонтальные и вертикальные радиусы для всех четырех углов, перечислив 1–4 значения до слеша и 1–4 других значения после него. Обратите внимание, что эти последовательности раскрываются в полные наборы из четырех значений по отдельности. Например, значение
border-radius , равное  10px / 5px 20px , эквивалентно  10px 10px 10px 10px / 5px 20px 5px 20px .

Вооружившись этими знаниями, давайте снова вернемся к проблеме половины эллипса. Можно ли указать такие значения  border-radius , чтобы в результате была сгенерирована требуемая фигура? Мы не узнаем, пока не попробуем. Начнем с того, что запишем некоторые результаты наблюдений: ‰ фигура симметрична по горизонтали, что означает, что верхний левый и верхний правый радиусы должны быть одинаковыми; точно так же должны совпадать нижний левый и нижний правый радиусы; ‰ наверху нет прямого горизонтального края (то есть вся верхняя граница фигуры изогнута), что означает, что верхний левый и верхний правый радиусы в сумме должны давать 100% ширины фигуры; ‰ исходя из предыдущих двух наблюдений, можно заключить, что горизонтальные радиусы, как левый, так и правый, должны составлять 50%; ‰ по вертикали скругление двух верхних углов распространяется на всю высоту элемента, а у нижних углов скругление отсутствует. Следовательно, разумными значениями для вертикальной части  border-radius кажутся
100% 100% 0 0;
‰Так как вертикальное скругление нижних углов равно нулю, их горизонтальное скругление не играет никакой роли, поскольку результат всегда будет нулевым (вы можете вообразить угол с нулевым вертикальным скруглением и положительным горизонтальным? Вот-вот, разработчики спецификации тоже не могли).
Сложив все это вместе, нетрудно сформулировать CSS-код для гибкой половины эллипса:
border-radius: 50% / 100% 100% 0 0;
Ничуть не сложнее сообразить, какими должны быть значения для создания половинки эллипса, разрезанного по вертикальной оси.


border-radius: 100% 0 0 100% / 50%;
В качестве упражнения попробуйте написать CSS-код для второй половинки эллипса.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/half-ellipse

Четвертинки эллипса

После создания целого эллипса и половины эллипса естественным образом возникает вопрос о четвертинке эллипса, например такой.

Следуя той же цепочке размышлений, можно заметить, что для создания четвертинки эллипса необходимо для одного из углов указать 100% радиус как по горизонтали, так и по вертикали, а остальные определить безо всякого скругления.
Поскольку процентное значение должно быть одинаковым и для горизонтальных, и для вертикальных радиусов всех четырех углов, запись со слешем не требуется. Код будет выглядеть так:
border-radius: 100% 0 0 0;
К сожалению, на случай, если вы теперь размышляете о других долях эллипса, которые можно было бы создавать с помощью  border-radius (например, можно ли сконструировать одну восьмую эллипса? или одну треть?), должна вас огорчить:  border-radius не поддерживает значения, которые бы позволили реализовать это.

Simurai мастерски применил возможности  border-radius для создания всевозможных типов фигур для своих кнопок-конфеток

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/quarter-ellipse
Десерт на сегодня - видео о новой модели робота от Boston Dynamics:

Прочитано 313 раз Последнее изменение Воскресенье, 19 февраля 2017 13:11
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+