Сглаженные углы с помощью CSS Houdini

Сглаженные углы с помощью CSS Houdini

От автора: в этой статье речь пойдет про углы CSS, а точнее, про их сглаживание. Недавно я поделился в Twitter статьей об оптических эффектах пользовательского интерфейса. Мне нравятся различные оптические эффекты, но для меня это новая сфера: преобразованный круг может выглядеть круче, чем обычная геометрическая фигура! Это справедливо и для прямоугольников со сглаженными углами. Удивительно, но я также обнаружил, что Apple использует этот прием для всех иконок в iOS7. В математике он известен, как кривая Ламе или суперэллипс.

Сглаженные углы с помощью CSS Houdini

Различия между формами значков в iOS6 и iOS7

Кроме того, я экспериментировал с Paint API от Houdini. Этот API определяет новый способ создания контента в CSS image во время фазы рисования процесса рендеринга. Это дает нам возможность программно рисовать изображение, которое будет использоваться в качестве фона, например. И нарисовать супер эллипс, оказывается, довольно просто.

Несколько недель спустя Sketch выпустили новую версию и представили функцию “Smooth corners”, которая, насколько мне известно, представляет собой не что иное, как тот же супер эллипс. Мне больше нравится название супер эллипс, поэтому давайте создадим его с помощью CSS. Сначала добавим новый модуль paintWorklet.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Затем из этого модуля мы регистрируем новый рисунок smooth-corners, с методом paint, который рисует супер эллипс (алгоритм из QT codebase):

Давайте рассмотрим аргументы метода paint подробнее:

сtx — это объект PaintRenderingContext2D, который является подмножеством CanvasRenderingContext2D, поэтому мы можем нарисовать что угодно (почти)

size — это объект PaintSize, который представляет размер изображения

Теперь мы можем использовать это в CSS с помощью новой функции paint(). Она нарисует черный округлый прямоугольник со сглаженными углами:

Для простоты мы будем использовать в качестве маски CSS сгенерированное изображение. Таким образом, мы можем легко установить для background цвет, градиент или изображение.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Сглаженные углы с помощью CSS Houdini

Сглаженные углы в CSS

Это хороший, но не очень надежный способ. Поэтому мы нарисуем супер эллипс с именем squircle, потому что для переменной n установлено значение 4. Так как же нам нарисовать супер эллипс с другой экспонентой? Для иконок IOS используется 5. Давайте сделаем это с помощью пользовательских свойств CSS. Во-первых, мы используем пользовательское свойство —smooth-corners

И получим значение из функции registerPaint

Обратите внимание, что метод paint() получает третий аргумент styleMap, который является API для извлечения вычисляемых значений для свойств, перечисленных в inputProperties. Мы получаем значение —smooth-corners и используем его для переменной n.

И, самое замечательное, мы можем прописать —smooth-corners прямо в CSS, а само свойство можно также анимировать, если мы зарегистрируем его с помощью CSS.registerProperty (из CSS Houdini Properties & Values API). На данный момент API-интерфейс Paint от Houdini поддерживает только в Chrome, поэтому мы реализуем прогрессивное улучшение:

Кроме того, поскольку Houdini является JS-in-CSS, лучше подождать, пока JavaScript будет загружен. Здесь я решил добавить к элементу класс .is-loaded.

В процессе разработки нам нужно иметь возможность автоматизировать созданный CSS с помощью плагина PostCSS, например.
Вы можете поэкспериментировать с демо-версией http://lab.iamvdo.me/houdini/smooth-corners в поддерживающем браузере

Примечания

Использование маски CSS маскирует все за пределами блока (в этом и заключается предназначение маски). Вы должны иметь возможность добавить градиент или изображение с помощью registerPaint, если это необходимо (но, похоже, этот тип image еще не поддерживается должным образом, поэтому нам приходится иметь дело с тем, что есть на данный момент).

Если вы хотите немного поэкспериментировать, посмотрите другие демо-версии: создание собственных свойств фона, например, background-opacity или рисование градиента из 4 углов, где мы передаем аргументы вместо свойств. Буду рад, если вам понравятся мои работы!

Источник: http://iamvdo.me/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree