Углы css круглые: Скруглённые уголки | htmlbook.ru

Закругленные углы (суперэллипс) в экосистеме Apple

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

Squircle

Для этой фигуры есть термин. Она называется squircle (суперэллипс), и представляет собой помесь круга и квадрата. В отличие от обычных закругленных прямоугольников, у которых угол имеет идеальный полукруг, суперэллипс имеет более сжатую форму. Скругление угла не начинается внезапно, вместо этого кривая начинается глубоко внутри прямой и постепенно перерастает в видимую кривую (как показано на изображении 1.1).

Изображение 1.0 Третья комбинированная фигура усиливает этот эффект. Видимая синяя часть подрезается, чтобы получились более гладкие и мягкие углы

Изображение 1. 1 Суперэллипс (красная фигура) начинает округляться глубже по прямой линии, чем простой прямоугольник с закругленными углами (синяя фигура)

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

(Подробнее о математических расчетах, лежащих в основе этой фигуры стоит прочитать в этой статье).

Эффект

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

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

Примеры

Мне стало любопытно, насколько распространена форма суперэллипса в экосистеме Apple, поэтому я начал фотографировать все, что мог, и накладывать фигуры на изображения (см. изображение 2.2). Я рассмотрел HomePod, где суперэллипс очевиден, а также iPad, клавиши новой клавиатуры iPad, Apple Watch и кнопки покупки в приложениях Apple TV, Apple News и Apple Music. Как оказалось, суперэллипс есть везде.

Изображение 2.0 HomePod. При любом освещении вы не найдете острого угла

Изображение 2.1. Клавиатура iPad

Изображение 2.2 Типичный прямоугольник с закругленными углами, наложенный на силуэт iPad. Обратите внимание на едва заметные розовые участки, где закругленный прямоугольник выступает за суперэллипс (корпус iPad)

Изображение 2.3 Пункт управления, элементы управления внешним видом и подписка в Apple News +. Обратите внимание, что, несмотря на нарушение руководящих принципов Apple по поводу встроенных в приложение покупок, кнопка «Get Started» имеет форму суперэллипса

Изображение 2. 4 Суперэллипс дебютировал на iPhone в iOS 7, представив новую, более мягкую форму иконок приложений

Мой любимый пример – HomePod. В отличие от большинства колонок, которые прячут, чтобы не нарушать интерьер, HomePod предназначен стать элементом декора комнаты. Подобно керамическим изделиям ручной работы, HomePod прекрасно смотрится при любом освещении. Ключевым моментом является его форма – независимо от того, как свет падает на устройство, зритель не может выделить острый край.

Попытки использования кривых линий, как средства смягчения продукта не новы. Пит Хейн использовал squircle в 1959 году для решения транспортных проблем в Стокгольме. Центральное место в архитектурном стиле Захи Хадид занимали мягко округленные формы, чтобы напомнить о природе и придать новым строениям ощущение футуристичности.

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

Мне пришла идея написать эту статью, когда я добавлял суперэллипс в наше приложение Minimal | Notes. Если вы дизайнер или iOS-разработчик, который хочет добавить суперэллипс в свой продукт, ознакомьтесь с этими простыми инструкциями.

---

Перевод статьи medium.com

Круглые уголки, интересные варианты

---

23 Jun, 2008

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

Обычный вариант

На всякий случай расскажу о банальном, и основном способе вёрстки круглых краёв у блоков. Это всего лишь несколько обёрнутых один в другой дивов. Вот так:

1. <!— BEGIN блок с круглыми краями —>
2. <div>
3. <div>
4. <div>
5. <div>
6. наконец контент!
7. </div>
8. </div>
9. </div>
10. </div>
11. <!— END блок с круглыми краями —>

Для уголков соответственно берутся картинки вроде этой:

Закругленный уголок, обычно нужно 4 штуки, для каждого из углов

Расставляются уголки вот так:

1. .
   content{background:url(../img/top-left.png) no-repeat top left}
2. .in1{background:url(../img/top-right.png) no-repeat top right}
3. .in2{background:url(../img/bottom-left.png) no-repeat bottom left}
4. .in3{background:url(../img/bottom-right.png) no-repeat bottom right}

Вариант на wordpress.org, css only

1. .block{
2. -moz-border-radius: 3px;
3. -khtml-border-radius: 3px;
4. -webkit-border-radius: 3px;
5. border-radius:3px;
6. }

Это сработает везде кроме IE (и Opera всё собирается), а это сейчас уже, вобщем, немало. Потому для не очень важных мест, или для сайтов с известной статистикой, это можно делать уже сейчас.

Также идеально подходит для ресурсов, которые хотят выказать своё идеологическое «Фе» неполноценным, по их мнению, броузерам.

Вариант на beta.ya.ru

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

Решить эту проблему можно, если поместить все уголки в одну картинку, и затем просто смещением позиции фона, расставить их. Но возникает вопрос — «Как это сделать, черт возьми?».

В Яндексе эту проблему решили. На главной можно пронаблюдать кнопочку «Присоединиться». (тем кто залогинен, нужно выйти, на секунду)

При увеличении шрифта, кнопочка будет расти. Более того! Фоном для нее может служить любой рисунок или градиент(имеется ввиду подложка, которая сейчас белая)

Вот какой применяется HTML:

1. <a href=»#»>
2. <i><i></i></i>
3. <i><i></i></i>
4. <i><i></i></i>
5. <i><i></i></i>
6. <i><i></i></i>
7. <i><i></i></i>
8. <i><i></i></i>
9. <i><i></i></i>
10. <b>Присоединиться!</b>
11. </a>

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

Все круглые края, а также верх и низ кнопки

Левый и правый края кнопки. Картинка на самом деле 32×1 пиксель, но я её растянул, чтобы было видно.

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

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

Полный код я приводить не буду, скажу лишь, что всё замешано на position:absolute и background-position. Кому интересно, весь CSS-код находится в начале этого файла.
Остается только преклониться перед мастерством, и я бы сказал, изворотливостью профессионалов работающих в Яндекс (Крыму привет!). =)

Вобщем-то этот пост я затеял, чтобы поделиться Яндекс и «вордпресс» вариантами. Надеюсь и у вас в загашнике что-то есть.

Cсылки

Проблема, мягко говоря, изучена вдоль и поперёк. Несколько полезно-интересных ссылок.

• Три примера из поста, вживую
• Закругленные уголки с помощью VML (IE) и border-radius(для всех остальных), работает в IE,Safari,Firfox
• Круглые уголки, все методы, классифицированные по способам реализации
• Roundedcornr. com ресурс для генерации картинок круглых уголков
• Curvy Corners генерируются джаваскриптом
• Spiffy Corners без джаваскрипта, без картинок, эмуляция с помощью нескольких дополнительных дивов
• Nifty corners, тоже самое что Spiffy, только с джаваскриптом
• Несколько интересных вариантов от Stu Nicholls (Спасибо Tutta)

Рад буду услышать Ваш оригинальный способ для круглых уголков! Я думал, что применял всё что известно, но оказалось что о двух рассказанных сегодня в посте, я всерьез не задумывался никогда.

ЗЫ: никогда никого не просил о помощи в этом блоге, но если Вы учитесь(учились, работаете) на физфаке МГУ и у вас добрая душа (или вы просто хотите улучшить карму, как это делает Earl), дайте знать пожалуйста, я в долгу не остаюсь.

Twitter

Tweets by @akella

Как сделать так, чтобы закругленные углы скрывали переполнение в Opera/Chrome

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

Задайте ширину и высоту «обертки» и укажите ее радиус границы. Затем установите переполнение на «скрытое» и положение на «абсолютное». Для класса «коробка» также укажите ширину и высоту.

Пример того, как скругленные углы скрывают переполнение:

 

  <голова>
    
    <стиль>
      #обертка {
        ширина: 300 пикселей;
        высота: 300 пикселей;
        радиус границы: 90 пикселей;
        переполнение: скрыто;
        положение: абсолютное;
      }
      #коробка {
        ширина: 300 пикселей;
        высота: 300 пикселей;
        цвет фона: #a9ffa3;
      }
    
  
  <тело>
    <дел>
      <дел>
        Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.
        Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов.
        когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать
        Типовая книга образцов.   Он пережил не только пять столетий, но и
        перейти к электронному набору текста, оставаясь практически неизменным.