Начало работы с формами CSS: оборачивание содержимого вокруг пользовательских путей

  1. Создание фигур вручную
  2. Функция круга ()
  3. Справочные блоки для CSS Shapes
  4. Функция эллипса ()
  5. Функция многоугольника ()
  6. Функция inset ()
  7. Создание фигур из опорных блоков
  8. Поле формы
  9. Анимационные фигуры
  10. Завершение содержимого внутри фигуры
  11. Прогрессивное улучшение
  12. Устранение неоднозначности из исключений CSS
  13. Заключение

В течение долгого времени веб-дизайнеры были вынуждены создавать в рамках ограничений прямоугольника. Большая часть контента в Интернете по-прежнему заключена в простые блоки, потому что большинство творческих начинаний с непрямоугольным макетом заканчиваются разочарованием. Это может измениться с появлением CSS Shapes, доступным начиная с Chrome 37.

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

Формы могут быть определены вручную, или они могут быть выведены из изображений.

Давайте посмотрим на очень простой пример.

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

<img class = ”element” src = ”image.png” /> <p> Lorem ipsum… </ p> <style> .element {shape-outside: url (image.png); порог формы изображения: 0,5; плыть налево; } </ style>

Объявление CSS shape-outside: url (image.png) указывает браузеру извлечь фигуру из изображения.

Свойство shape-image-threshold определяет минимальный уровень непрозрачности пикселей, который будет использоваться для создания фигуры. Его значение должно находиться в диапазоне от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный). Итак, shape-image-threshold: 0.5 означает, что для создания фигуры будут использоваться только пиксели с непрозрачностью 50% и выше.

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

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

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

Создание фигур вручную

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

Функция круга ()

Функция круга ()

Полное обозначение для значения формы окружности - это окружность (r в cx cy), где r - радиус окружности, а cx и cy - координаты центра окружности на осях X и Y. Координаты центра круга необязательны. Если вы их опустите, по умолчанию будет использоваться центр элемента (пересечение его диагоналей).

.element {форма снаружи: круг (50%); ширина: 300 пикселей; высота: 300 пикселей; плыть налево; }

В приведенном выше примере контент будет обернут вокруг внешней круговой траектории. Один аргумент 50% указывает радиус круга, который в данном конкретном случае составляет половину ширины или высоты элемента. Изменение размеров элемента будет влиять на радиус формы круга. Это основной пример того, как CSS Shapes может быть отзывчивым.

Прежде чем идти дальше, немного в сторону: важно помнить, что CSS Shapes влияет только на форму области с плавающей точкой вокруг элемента. Если элемент имеет фон, он не будет обрезан по фигуре. Чтобы достичь этого эффекта, вы должны использовать свойства из CSS Masking - или клип путь или же Маска-изображения , Свойство clip-path очень удобно, потому что оно соответствует той же записи, что и CSS Shapes, поэтому вы можете повторно использовать значения.

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

Вернуться к форме круга.

При использовании процентов для радиуса круга значение фактически вычисляется с несколько более сложным формула : sqrt (ширина ^ 2 + высота ^ 2) / sqrt (2). Это полезно понять, потому что это поможет вам вообразить, какой будет форма круга, если размеры элемента не равны.

Все типы блоков CSS могут использоваться в координатах функции формы - px, em, rem, vw, vh и т. Д. Вы можете выбрать тот, который является гибким или достаточно жестким для ваших нужд.

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

.element {shape-outside: circle (50% при 0 0); }

Это помещает центр круга в начало системы координат. Что такое система координат? Здесь мы вводим справочные блоки.

Справочные блоки для CSS Shapes

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

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

Следующие два объявления CSS имеют одинаковые результаты:

.element {shape-outside: circle (50% при 0 0); / * идентично: * / shape-outside: круг (50% при 0 0) поле для полей; }

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

.element {shape-outside: круг (50% при 0 0) поле для полей; поле: 100px; }

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

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

Есть несколько вариантов ссылочных блоков на выбор: поле поля, поле границы, поле заполнения и поле содержимого. Их имена подразумевают их границы. Мы ранее объяснили поле на полях. Поле border ограничено внешними краями границ элемента, поле padding ограничено отступом элемента, в то время как поле content идентично фактической площади поверхности, используемой содержимым внутри элемента.

Поле border ограничено внешними краями границ элемента, поле padding ограничено отступом элемента, в то время как поле content идентично фактической площади поверхности, используемой содержимым внутри элемента

Только одно ссылочное поле может быть использовано в данный момент с объявлением внешней формы. Каждый ссылочный блок будет влиять на форму по-своему, а иногда и неуловимо. Есть еще одна статья, которая углубляется и помогает вам понимать ссылочные блоки для CSS-форм ,

Функция эллипса ()

Функция эллипса ()

Эллипсы выглядят как сплющенные круги. Они определены как эллипс (rx ry в cx cy), где rx и ry - радиусы эллипса на осях X и Y, а cx и cy - координаты центра эллипса.

.element {shape-outside: эллипс (150px 300px при 50% 50%); ширина: 300 пикселей; высота: 600 пикселей; }

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

Радиусы по осям X и Y также могут быть определены с помощью ключевых слов: дальняя сторона дает радиус, равный расстоянию между центром эллипса и наиболее удаленной от него стороной контрольной рамки, а ближайшая сторона означает прямо противоположное - используйте кратчайшее расстояние между центром и стороной.

.element {shape-outside: эллипс (самая дальняя сторона на 50%, 50%); / * идентично: * / shape-outside: эллипс (150px 300px при 50% 50%); ширина: 300 пикселей; высота: 600 пикселей; }

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

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

Функция многоугольника ()

Функция многоугольника ()

Если круги и эллипсы слишком ограничены, функция многоугольника открывает множество вариантов. Формат - полигон (x1 y1, x2 y2, ...), где вы указываете пары координат xy для каждой вершины (точки) многоугольника. Минимальное количество пар для указания многоугольника - три, треугольник.

.element {shape-outside: polygon (0 0, 0 300px, 300px 600px); ширина: 300 пикселей; высота: 600 пикселей; }

Вершины размещаются в системе координат. Для отзывчивых полигонов вы можете использовать процентные значения для некоторых или всех координат.

.element {/ * полигон, реагирующий на размер шрифта * / shape-outside: polygon (0 0, 0 100%, 100% 100%); ширина: 20м; высота: 40em; }

Существует необязательный параметр правила заполнения, импортировано из SVG , который инструктирует браузер, как учитывать «внутренность» многоугольника в случае самопересекающихся путей или вложенных фигур. Джони Тритхолл очень хорошо объясняет как работает свойство fill-rule в SVG. Если не определено, правило заполнения по умолчанию отлично от нуля.

.element {shape-outside: многоугольник (0 0, 0 100%, 100% 100%); / * идентично: * / shape-outside: многоугольник (ненулевой, 0 0, 0 100%, 100% 100%); }

Функция inset ()

Функция формы inset () позволяет вам создавать прямоугольные формы, вокруг которых можно обернуть содержимое. Это может показаться нелогичным, если учесть исходную предпосылку, что CSS Shapes освобождает веб-контент от простых блоков. Это может быть очень хорошо. Мне еще предстоит найти сценарий использования inset (), который еще не может быть достигнут с помощью чисел с плавающей точкой и полей или многоугольника (). Хотя inset () обеспечивает более читаемое выражение для прямоугольных фигур, чем polygon ().

Полное обозначение для функции формы вставки - вставка (верхний правый нижний левый border-radius). Первые четыре аргумента позиции смещены внутрь от ребер элемента. Последний аргумент - это радиус границы для прямоугольной формы. Это необязательно, так что вы можете оставить это. Он соответствует сокращенной записи граничного радиуса, которую вы уже используете в CSS.

.element {shape-outside: inset (100px 100px 100px 100px); / * дает прямоугольную форму со 100px вставкой со всех сторон * / float: left; }

Создание фигур из опорных блоков

Если вы не указали функцию shape для свойства shape-outside, вы можете разрешить браузеру получать форму из ссылочного поля элемента. Справочное поле по умолчанию - поле для полей. Пока ничего экзотического, вот как поплавки уже работают. Но применяя эту технику, вы можете повторно использовать геометрию элемента. Давайте посмотрим на свойство border-radius.

Если вы используете его для закругления углов плавающего элемента, вы получите эффект отсечения, но область с плавающей точкой остается прямоугольной. Добавьте shape-outside: border-box для обтекания контура, созданного border-radius.

Добавьте shape-outside: border-box для обтекания контура, созданного border-radius

.element {border-radius: 50%; внешняя форма: бордюр; плыть налево; }

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

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

Вот как можно добиться такого же эффекта вытягивания с добавленной гибкостью:

.pull-quote {shape-outside: content-box; margin-top: 200px; плыть налево; }

Мы явно устанавливаем ссылочную рамку блока содержимого для системы координат фигуры. В этом случае количество контента в предложении определяет форму, вокруг которой будет оборачиваться внешний контент. Свойство margin-top используется здесь для позиционирования (смещения) вытягивающей кавычки независимо от ее положения в дереве HTML.

Поле формы

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

.element {форма снаружи: круг (40%); поле формы: 1em; плыть налево; }

Эффект похож на то, к чему вы привыкли при использовании обычного свойства margin, но shape-margin влияет только на пространство вокруг значения shape-outside. Это добавит интервал вокруг фигуры, только если есть место для нее в системе координат. Вот почему в приведенном выше примере радиус круга установлен на 40%, а не на 50%. Если бы радиус был установлен на 50%, круг занял бы все пространство в системе координат, не оставляя места для эффекта поля формы. Помните, что форма в конечном счете ограничена полем поля элемента (элемент плюс его окружающее поле). Если форма больше и переполняется, она будет обрезана до поля поля, и вы получите прямоугольную форму.

Важно понимать, что форма-маржа принимает только одно положительное значение. У него нет обозначения длинной руки. Что такое форма-поле-вершина для круга?

Анимационные фигуры

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

Вы можете анимировать радиусы и центры для фигур круга () и эллипса (), если они определены в значениях, которые браузер может интерполировать. Возможен переход от круга (30%) к кругу (50%). Однако анимация между кружком (ближайшая сторона) и кружком (дальняя сторона) задушит браузер.

.element {форма снаружи: круг (30%); переход: форма наружу 1с; плыть налево; } .element: hover {shape-outside: circle (50%); }

Более интересные эффекты могут быть достигнуты при анимации форм polygon (), при этом важно отметить, что многоугольник должен иметь одинаковое количество вершин между двумя состояниями анимации. Браузер не может интерполировать, если вы добавляете или удаляете вершины.

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

.element {/ * четыре вершины (выглядит как прямоугольник) * / shape-outside: многоугольник (0 0, 100% 0, 100% 100%, 0 100%); переход: форма наружу 1с; } .element: наведите {/ * четыре вершины, но второе и третье перекрываются (выглядит как треугольник) * / shape-outside: polygon (0 0, 100% 50%, 100% 50%, 0 100%); }

Завершение содержимого внутри фигуры

Завершение содержимого внутри фигуры

Первоначальный проект спецификации CSS Shapes включал свойство shape-inside, которое позволяло вам оборачивать содержимое внутри фигуры. Некоторое время были даже реализации в Chrome и Webkit. Но упаковка произвольно расположенного содержимого в пользовательский путь требует гораздо больше усилий и исследований, чтобы охватить все возможные сценарии и избежать ошибок. Вот почему свойство shape-inside было отложено до CSS Shapes Level 2 и реализации для него были отозваны.

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

<div> <div class = "left-shape"> </ div> <div class = "right-shape"> </ div> Lorem ipsum ... </ div>

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

.left-shape {shape-outside: polygon (0 0, ...); плыть налево; ширина: 50%; высота: 100%; } .right-shape {shape-outside: polygon (50% 0, ...); плавать: правильно; ширина: 50%; высота: 100%; }

);  плавать: правильно;  ширина: 50%;  высота: 100%;  }

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

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

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

в Алиса в стране чудес демонстрация CSS Shapes, мы использовали положение прокрутки для изменения верхнего поля содержимого. Текст зажат между двумя плавающими элементами. Когда он движется вниз, он должен ретранслироваться в соответствии с внешней формой двух плавающих элементов. Это создает впечатление, что текст идет по кроличьей норе, и это добавляет опыта рассказывания историй. Граница безвозмездная? Может быть. Но это выглядит круто.

Поскольку макетирование текста выполняется изначально браузером, производительность выше, чем при использовании решения JavaScript. Но изменение верхнего предела при прокрутке действительно вызывает много событий ретрансляции и рисования, и это может заметно снизить производительность. Используйте с осторожностью! Однако использование CSS Shapes без их анимации не приводит к ощутимому снижению производительности.

Прогрессивное улучшение

Начните с предположения, что браузер не поддерживает CSS Shapes, и используйте его, когда вы обнаружите эту функцию. Modernizr является хорошим решением для обнаружения объектов, и в «Неосновные обнаруживает» раздел.

Некоторые браузеры обеспечивают обнаружение функций в CSS с помощью правила @supports без необходимости использования внешних библиотек. Google Chrome, который также поддерживает CSS Shapes, понимает правило @supports. Вот как вы используете его для постепенного улучшения:

.element {/ * стили для всех браузеров * /} @supports (shape-outside: circle (50%)) {/ * стили только для браузеров, которые поддерживают CSS Shapes * / .element {shape-outside: circle (50%) ; }}

Леа Веру написал больше о как использовать правило CSS @supports ,

Устранение неоднозначности из исключений CSS

То, что мы знаем сегодня как CSS Shapes, раньше называлось CSS-исключениями и Shapes в первые дни спецификации. Переключение в именовании может показаться нюансом, но на самом деле это очень важно. CSS исключения , теперь отдельная спецификация, позволяет оборачивать содержимое вокруг элементов, расположенных произвольно, без необходимости использования свойства float. Представьте, что вы оборачиваете контент вокруг абсолютно позиционированного элемента; это вариант использования для исключений CSS. Формы CSS просто определяют путь, по которому будет оборачиваться содержимое.

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

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

Формы CSS предназначены для использования в браузере, где они реагируют на другие элементы на странице. Очень полезно визуализировать эффекты редактирования формы на окружающем ее контенте. Есть несколько инструментов, которые помогут вам в этом рабочем процессе:

Скобки : Расширение CSS Shapes Editor для скобок использует режим предварительного просмотра редактора кода для наложения интерактивного редактора для редактирования значений формы.

Google Chrome : Расширение CSS Shapes Editor для Google Chrome расширяет инструменты разработчика браузера элементами управления для создания и редактирования фигур. Он помещает интерактивный редактор поверх выбранного элемента.

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

Фигуры из изображений : если вы предпочитаете генерировать изображения и хотите, чтобы браузер извлекал из них фигуры, Ребекка Хаук написала хороший учебник для фотошопа ,

Polyfill : Google Chrome - первый крупный браузер, который отправляет CSS Shapes. Предусматривается поддержка этой функции в Apple iOS 8 и Safari 8. Другие производители браузеров могут рассмотреть ее в будущем. До тех пор, пока есть CSS Shapes polyfill обеспечить базовую поддержку.

Заключение

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

Я оставляю тебя с коллекция работ другими, в основном из печати, что демонстрирует интересное использование для непрямоугольной разметки. Я надеюсь, что это вдохновляет вас попробовать CSS Shapes и экспериментировать с новыми дизайнерскими идеями.

Огромное спасибо Перл Чен, Алану Стернсу и Золтану Хорвату за рецензирование этой статьи и предоставление ценной информации.