Введение в CSS Shapes


Содержание

Про CSS

Css-фигуры

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

Все фигуры из этого примера можно сделать на основе одного элемента.

Кольца можно сделать с помощью border или box-shadow , причем во втором случае рамка кольца не увеличивает размер фигуры, а колец может быть несколько и они могут быть смещены относительно друг друга:

Frontender Magazine

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

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

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

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

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

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

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

Объявление формы

Все HTML-элементы имеют прямоугольную блочную модель, которая управляет потоком содержимого внутри и снаружи нее. Для того, чтобы придать элементу непрямоугольную форму, мы используем свойства shape-inside и shape-outside . Когда я писала эту статью, свойство shape-outside применялось только для плавающих элементов, а свойство shape-inside не было полностью внедрено, поэтому при использовании этих свойств у вас могут возникать ошибки. Свойства shape-* могут применяться только к блочным элементам. Неблочные элементы должны приводиться стилями к блочным, и только тогда можно использовать shape-свойства.

Shape-* свойства принимают одно из трех значений: auto, базовая фигура или URI изображения. Если свойство установлено в auto, то плавающие элементы используют margin box в обычном режиме. Если вы не знакомы с CSS box-model, то рекомендую ознакомиться, потому что вы должны знать, как это работает.

Если свойству задана «функция формы» (shape function), то форма вычисляется на основе выбора одного из значений функций — rectangle , inset-rectangle , circle , ellipse , polygon . Больше информации об этих функциях вы сможете найти в статье команды Adobe Platform.

И наконец, если свойству задано URI изображения, браузер будет использовать изображение для извлечения и вычисления формы, основываясь на альфа-канале изображения. Форма вычисляет путь, который охватывает область, где непрозрачность указанного изображения больше, чем значение параметра shape-image-threshold . Если параметр shape-image- threshold не задан, то исходным значением считается 0.5 . Изображение должно быть CORS-same-origin, в противном случае оно не будет работать, и значение shape-* свойства автоматически установится в auto .

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

Формы, определенные при помощи свойств shape-*, могут быть изменены при помощи shape-margin и shape-padding . Эти свойства говорят сами за себя.

Установка системы координат на элементе.

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

Система координат обязательна, так как формы, которые вы задаете, будут определены через набор точек (и радиусов, если рисовать круги или эллипсы), и эти точки задаются через координаты x и y на координатной оси.

Свойства формы используют content-box элемента к которому они применяются ради системы координат, поэтому чтобы свойства заработали, вы должны задать ширину и высоту элементу, которые создают bounding-box , который в свою очередь можно использовать для установки системы координат для отрисовки форм. Если ширина и высота явно не указаны, свойства форм работать не будут.

Центр системы координат у элемента с заданными размерами устанавливается в верхний левый угол.

Чтобы задать форму элементу вы должны:

  1. Задать конкретные значения элементу (помните, что он должен быть плавающим, если вы используете shape-outside ).
  2. Использовать свойства shape-*.

Применение фона к настраиваемым элементам

В то время как мы можем ограничивать строчный контент с помощью shapes (форм) реальный его контейнер не изменяется. Если элемент имеет конкретные внешние и внутренние отступы, границы, то они будут рассчитаны в соответствии с CSS3BOX. — W3C CSS Shapes Module Level 1

Другими словами, форма, определенная на элементе с помощью свойств shape-*, влияет только на плавающую область элемента, то есть на поток внутри/снаружи элемента, но остальные свойства не изменяются.

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

Фон применен к заданной пользователем форме

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

Фон применяется к прямоугольной коробке элемента

Как же применить цвет только к форме, а не ко всему элементу сразу? Вот где свойство clip-path из CSS-спецификации может помочь.

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

Каким образом? Какое значение свойства clip-path заставляет так работать?

Система координат для формы, к которой применялось свойство clip-path , устанавливается, используя границы элемента, для которого clip-path был применен, поэтому система координат аналогична для свойств shape-*.

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

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

Краткое (быстрое) напоминание

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

Расположение контента с двух сторон от CSS-формы

Сэмулировать обтекание формы с двух сторон можно при помощи плагина Исключающего удара (Exclusion Punch plugin) от Биара Трэвиса (Bear Travis).

А теперь приступим к созданию форм и макетов!

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

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

Пример 1: Плавающий текст вокруг пользовательской формы с shape-outside

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

Скриншот примера №1. Нажмите на скриншот, чтобы увидеть работающее демо

В демо-примере мы имеем контейнер с двумя элементами: .content (блок с текстом, находится слева) и .shaped , плавающий блок, прибитый к правой части контейнера, который получит собственную форму и будет иметь обтекающий слева текст. Заголовок в блоке .content получит такое же поведение, которое мы дадим блоку .shaped , далее я пропущу объяснения и буду рассказывать только то, что мы делаем с блоком .shaped .

Сперва мы зададим плавающему элементу div конкретную высоту и ширину для установки системы координат. Мы установим высоту, равную высоте контейнера, который я для этого примера создала равным высоте вьюпорта, используя единицу измерения vh .

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

Использование polygon()

В первом способе мы будем использовать функцию polygon() . Данная функция принимает набор точек, которые образуют четырехугольник, каждая точка задается через координаты x и y . Мы собираемся определить очень простую четырехугольную фигуру с 4 вершинами, как показано на рисунке ниже (оранжевые и голубые точки):

Скриншот на котором изображены вершины, которые образуют четырехугольную форму

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

И это все! Теперь текст обтекает плавающий элемент по специальной форме, которую мы определили.

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

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

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

Поэтому мы вырезаем лишнюю часть с помощью свойства clip-path , которому мы дадим то же значение/форму, что мы дали свойству shape-outside выше. Мы добавим это правило в набор правил:

Вот мы и закончили! Легко, не правда ли?

Заголовок страницы слева имеет такое же поведение, как и div с классом .shaped . Заголовок плавает внутри контейнера .content , ему дана конкретная высота и ширина для установки системы координат, а затем на нем устанавливается форма при помощи свойства shape-outside так же, как мы это делали для элемента .shaped .

Использование URI изображения

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

Для примера вместо использования функции polygon() для определения формы, мы укажем в свойстве shape-outside URI изображения, в результате чего браузер достанет форму из изображения и использует ее.

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

Изображение с альфа-каналом чей url будет использован для извлечения и расчета значения формы

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

Для использования этого изображения мы напишем следующее:

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

Другая ситуация, когда стоит использовать URI изображения вместо функции формы, — это когда у вас много плавающих или исключающих областей в элементе; в таком случае использование URI изображения обязательно, потому что вы не можете (пока что) объявлять несколько форм на одном элементе, но у изображения может быть много областей, которые браузер может извлечь и использовать. Неплохо, правда? Последний пример как раз описывает подобную ситуацию.

Пример 2: оборачивание/обтекание текста внутри произвольной формы при помощи shape-inside

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

Скриншот примера №2. Нажмите на скриншот, чтобы увидеть работающее демо

Цель этого примера — показать использование свойства shape-inside для плавающего текста в непрямоугольной форме. У нас есть контейнер с несколькими заглушками текста внутри него и мы применяем фоновое изображение этому контейнеру.

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

Использование circle()

Функция circle() имеет три аргумента: cx , cy и r (радиус), где cx и cy — координаты центра окружности, а r — это радиус окружности.

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

Система координат и форма определенные на контейнере

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

На этот раз мы укажем координаты центра окружности в абсолютных величинах, а не в процентах, установим значение радиуса и применим это все к контейнеру:

Конечно, если вы не пытаетесь создать окружность идеальной формы, вы можете определить форму при помощи функции polygon() .

Использование URI изображения

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

Изображение с альфа-каналом определяющее форму круга

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

Чтобы определить форму, используя URI изображения вместо функции circle() , вы должны будете указать в значении свойства shape-inside URI изображения.

Пример 3: размещение текста внутри пользовательской формы при помощи shape-inside

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

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

Форма контейнера, содержащая текст — это явно «произвольная» многоугольная форма, а не геометрическая форма, которую можно было бы объявить, используя функции форм вроде circle() , ellipse() или rectangle() , поэтому для ее объявления мы будем использовать функцию polygon() .

На рисунке снизу показана форма, задаваемая набором точек.

Многоугольник заданный набором точек

Так как эта форма задается довольно большим количество точек, вычислять их координаты было бы утомительно, поэтому было бы намного проще, если бы существовал визуальный инструмент, который помог бы расставить точки на изображении, правда ведь? И такой инструмент существует и создан Биаром Трэвисом из Adobe; на самом деле, это набор инструментов, который поможет вам при работе с CSS-формами. Обязательно посмотрите на Shape Tools, потому что они очень полезны.

Один из инструментов Shape tools называется Poly Draw, и он позволяет вам вручную рисовать формы, в частности многоугольники, а затем генерирует координаты формы, которые вы можете скопировать и вставить в свой CSS, чтобы задать форму на элементе.

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

[Рэзвэн Кэлимэн]30] (Razvan Caliman) предложил мне эту идею, когда я спросила его о доступности инструмента, который позволял бы определять формы на картинке прямо в браузере, такого же как, и тот, что он показывал во время своего выступления на CSS- конференции Conf EU]31]. Если вы еще не видели, то обязательно посмотрите. Исходники этого инструмента когда-нибудь (очень надеюсь, что скоро), будут открыты компанией Adobe, и тогда этот инструмент станет незаменимым при работе с CSS-формами. Ну, а пока можно обходиться инструментом Poly Draw.

После того как вы нарисовали форму при помощи Poly Draw, вам нужно только объявить результирующую форму элемента.

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

Изображение с альфа-каналом определяющее форму для примера №2

Если вы хотите использовать URI изображения вместо функции формы, вы должны заменить значение свойства shape-inside следующим кодом:

Пример 4: Множественные области с shape-inside

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

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

Так как мы не можем объявить несколько форм на элементе, мы будем использовать изображение с альфа-каналом. Изображение может содержать любое количество форм и областей, поэтому оно идеально для определения множества форм на элементе; браузер извлекает все формы из изображения и использует их на элементе. Мы будем использовать следующее изображение для определения форм. Черные области на изображении будут определять плавающие области для контента внутри элемента .container , где будет находиться текст.

Изображение с альфа-каналом для определения формы для примера №3

В определении элемента .container в значение свойства shape-inside мы подставим наше изображение с альфа-каналом и не забудем указать блоку высоту и ширину:

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

Использовать изображения для определения форм вполне логично, когда вы работаете с раздельными областями, не соединенными друг с другом, то есть когда нельзя сформировать многоугольник. Для этого примера мы могли бы использовать функцию polygon() для определения формы; определение многоугольника выглядело бы следующим образом:

Иллюстрация набора точек для создания одного многоугольника

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

Комбинирование CSS-форм с регионами и флексбоксами для создания журнальных макетов

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

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

Подобный макет может быть воссоздан при помощи CSS-форм и регионов

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

Заключение

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

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

Будущее веб-разработки выглядит все ярче и привлекательней с каждым днем. Хорошо быть веб-разработчиком!

Я надеюсь, что эта статья поможет вам войти в технический курс дела относительно CSS- форм и исключений. Это не последняя моя статья на эту тему. Комбинирование CSS-форм с другими передовыми технологиями мира CSS, такими как регионы, открывает двери в новый мир творческих идей и создания новых статей! ;)

Введение в CSS Shapes

Создание непрямоугольных макетов при помощи CSS-форм

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

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

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

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


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

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

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

Все HTML-элементы имеют прямоугольную блочную модель, которая управляет потоком содержимого внутри и снаружи нее. Для того, чтобы придать элементу непрямоугольную форму, мы используем свойства shape-inside и shape-outside . Когда я писала эту статью, свойство shape-outside применялось только для плавающих элементов, а свойство shape-inside не было полностью внедрено, поэтому при использовании этих свойств у вас могут возникать ошибки. Свойства shape-* могут применяться только к блочным элементам. Неблочные элементы должны приводиться стилями к блочным, и только тогда можно использовать shape-свойства.

Shape-* свойства принимают одно из трех значений: auto, базовая фигура или URI изображения. Если свойство установлено в auto, то плавающие элементы используют margin box в обычном режиме. Если вы не знакомы с CSS box-model, то рекомендую ознакомиться, потому что вы должны знать, как это работает.

Если свойству задана «функция формы» (shape function), то форма вычисляется на основе выбора одного из значений функций — rectangle , inset-rectangle , circle , ellipse , polygon . Больше информации об этих функциях вы сможете найти в статье команды Adobe Platform.

И наконец, если свойству задано URI изображения, браузер будет использовать изображение для извлечения и вычисления формы, основываясь на альфа-канале изображения. Форма вычисляет путь, который охватывает область, где непрозрачность указанного изображения больше, чем значение параметра shape-image-threshold . Если параметр shape-image- threshold не задан, то исходным значением считается 0.5 . Изображение должно быть CORS-same-origin, в противном случае оно не будет работать, и значение shape-* свойства автоматически установится в auto .

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

Формы, определенные при помощи свойств shape-*, могут быть изменены при помощи shape-margin и shape-padding . Эти свойства говорят сами за себя.

Установка системы координат на элементе.

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

Система координат обязательна, так как формы, которые вы задаете, будут определены через набор точек (и радиусов, если рисовать круги или эллипсы), и эти точки задаются через координаты x и y на координатной оси.

Свойства формы используют content-box элемента к которому они применяются ради системы координат, поэтому чтобы свойства заработали, вы должны задать ширину и высоту элементу, которые создают bounding-box , который в свою очередь можно использовать для установки системы координат для отрисовки форм. Если ширина и высота явно не указаны, свойства форм работать не будут.

Центр системы координат у элемента с заданными размерами устанавливается в верхний левый угол.

Чтобы задать форму элементу вы должны:

  1. Задать конкретные значения элементу (помните, что он должен быть плавающим, если вы используете shape-outside ).
  2. Использовать свойства shape-*.

Применение фона к настраиваемым элементам

В то время как мы можем ограничивать строчный контент с помощью shapes (форм) реальный его контейнер не изменяется. Если элемент имеет конкретные внешние и внутренние отступы, границы, то они будут рассчитаны в соответствии с CSS3BOX. — W3C CSS Shapes Module Level 1

Другими словами, форма, определенная на элементе с помощью свойств shape-*, влияет только на плавающую область элемента, то есть на поток внутри/снаружи элемента, но остальные свойства не изменяются.

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

Фон применен к заданной пользователем форме

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

Илон Маск рекомендует:  Что такое код sqlпредложение update

Фон применяется к прямоугольной коробке элемента

Как же применить цвет только к форме, а не ко всему элементу сразу? Вот где свойство clip-path из CSS-спецификации может помочь.

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

Каким образом? Какое значение свойства clip-path заставляет так работать?

Система координат для формы, к которой применялось свойство clip-path , устанавливается, используя границы элемента, для которого clip-path был применен, поэтому система координат аналогична для свойств shape-*.

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

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

Краткое (быстрое) напоминание

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

Расположение контента с двух сторон от CSS-формы

Сэмулировать обтекание формы с двух сторон можно при помощи плагина Исключающего удара (Exclusion Punch plugin) от Биара Трэвиса (Bear Travis).

А теперь приступим к созданию форм и макетов!

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

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

Пример 1: Плавающий текст вокруг пользовательской формы с shape-outside

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

Скриншот примера №1. Нажмите на скриншот, чтобы увидеть работающее демо

В демо-примере мы имеем контейнер с двумя элементами: .content (блок с текстом, находится слева) и .shaped , плавающий блок, прибитый к правой части контейнера, который получит собственную форму и будет иметь обтекающий слева текст. Заголовок в блоке .content получит такое же поведение, которое мы дадим блоку .shaped , далее я пропущу объяснения и буду рассказывать только то, что мы делаем с блоком .shaped .

Сперва мы зададим плавающему элементу div конкретную высоту и ширину для установки системы координат. Мы установим высоту, равную высоте контейнера, который я для этого примера создала равным высоте вьюпорта, используя единицу измерения vh .

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

В первом способе мы будем использовать функцию polygon() . Данная функция принимает набор точек, которые образуют четырехугольник, каждая точка задается через координаты x и y . Мы собираемся определить очень простую четырехугольную фигуру с 4 вершинами, как показано на рисунке ниже (оранжевые и голубые точки):

Скриншот на котором изображены вершины, которые образуют четырехугольную форму

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

И это все! Теперь текст обтекает плавающий элемент по специальной форме, которую мы определили.

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

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

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

Поэтому мы вырезаем лишнюю часть с помощью свойства clip-path , которому мы дадим то же значение/форму, что мы дали свойству shape-outside выше. Мы добавим это правило в набор правил:

Вот мы и закончили! Легко, не правда ли?

Заголовок страницы слева имеет такое же поведение, как и div с классом .shaped . Заголовок плавает внутри контейнера .content , ему дана конкретная высота и ширина для установки системы координат, а затем на нем устанавливается форма при помощи свойства shape-outside так же, как мы это делали для элемента .shaped .

Использование URI изображения

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

Для примера вместо использования функции polygon() для определения формы, мы укажем в свойстве shape-outside URI изображения, в результате чего браузер достанет форму из изображения и использует ее.

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

Изображение с альфа-каналом чей url будет использован для извлечения и расчета значения формы

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

Для использования этого изображения мы напишем следующее:

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

Другая ситуация, когда стоит использовать URI изображения вместо функции формы, — это когда у вас много плавающих или исключающих областей в элементе; в таком случае использование URI изображения обязательно, потому что вы не можете (пока что) объявлять несколько форм на одном элементе, но у изображения может быть много областей, которые браузер может извлечь и использовать. Неплохо, правда? Последний пример как раз описывает подобную ситуацию.

Пример 2: оборачивание/обтекание текста внутри произвольной формы при помощи shape-inside

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

Скриншот примера №2. Нажмите на скриншот, чтобы увидеть работающее демо

Цель этого примера — показать использование свойства shape-inside для плавающего текста в непрямоугольной форме. У нас есть контейнер с несколькими заглушками текста внутри него и мы применяем фоновое изображение этому контейнеру.

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

Функция circle() имеет три аргумента: cx , cy и r (радиус), где cx и cy — координаты центра окружности, а r — это радиус окружности.

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

Система координат и форма определенные на контейнере

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

На этот раз мы укажем координаты центра окружности в абсолютных величинах, а не в процентах, установим значение радиуса и применим это все к контейнеру:

Конечно, если вы не пытаетесь создать окружность идеальной формы, вы можете определить форму при помощи функции polygon() .

Использование URI изображения

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

Изображение с альфа-каналом определяющее форму круга

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

Чтобы определить форму, используя URI изображения вместо функции circle() , вы должны будете указать в значении свойства shape-inside URI изображения.

Пример 3: размещение текста внутри пользовательской формы при помощи shape-inside

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

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

Форма контейнера, содержащая текст — это явно «произвольная» многоугольная форма, а не геометрическая форма, которую можно было бы объявить, используя функции форм вроде circle() , ellipse() или rectangle() , поэтому для ее объявления мы будем использовать функцию polygon() .

На рисунке снизу показана форма, задаваемая набором точек.

Многоугольник заданный набором точек

Так как эта форма задается довольно большим количество точек, вычислять их координаты было бы утомительно, поэтому было бы намного проще, если бы существовал визуальный инструмент, который помог бы расставить точки на изображении, правда ведь? И такой инструмент существует и создан Биаром Трэвисом из Adobe; на самом деле, это набор инструментов, который поможет вам при работе с CSS-формами. Обязательно посмотрите на Shape Tools, потому что они очень полезны.

Один из инструментов Shape tools называется Poly Draw, и он позволяет вам вручную рисовать формы, в частности многоугольники, а затем генерирует координаты формы, которые вы можете скопировать и вставить в свой CSS, чтобы задать форму на элементе.

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

[Рэзвэн Кэлимэн]30] (Razvan Caliman) предложил мне эту идею, когда я спросила его о доступности инструмента, который позволял бы определять формы на картинке прямо в браузере, такого же как, и тот, что он показывал во время своего выступления на CSS- конференции Conf EU]31]. Если вы еще не видели, то обязательно посмотрите. Исходники этого инструмента когда-нибудь (очень надеюсь, что скоро), будут открыты компанией Adobe, и тогда этот инструмент станет незаменимым при работе с CSS-формами. Ну, а пока можно обходиться инструментом Poly Draw.

После того как вы нарисовали форму при помощи Poly Draw, вам нужно только объявить результирующую форму элемента.

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

Изображение с альфа-каналом определяющее форму для примера №2

Если вы хотите использовать URI изображения вместо функции формы, вы должны заменить значение свойства shape-inside следующим кодом:

Пример 4: Множественные области с shape-inside

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

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

Так как мы не можем объявить несколько форм на элементе, мы будем использовать изображение с альфа-каналом. Изображение может содержать любое количество форм и областей, поэтому оно идеально для определения множества форм на элементе; браузер извлекает все формы из изображения и использует их на элементе. Мы будем использовать следующее изображение для определения форм. Черные области на изображении будут определять плавающие области для контента внутри элемента .container , где будет находиться текст.

Изображение с альфа-каналом для определения формы для примера №3

В определении элемента .container в значение свойства shape-inside мы подставим наше изображение с альфа-каналом и не забудем указать блоку высоту и ширину:

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

Использовать изображения для определения форм вполне логично, когда вы работаете с раздельными областями, не соединенными друг с другом, то есть когда нельзя сформировать многоугольник. Для этого примера мы могли бы использовать функцию polygon() для определения формы; определение многоугольника выглядело бы следующим образом:

Иллюстрация набора точек для создания одного многоугольника

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

Комбинирование CSS-форм с регионами и флексбоксами для создания журнальных макетов

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

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

Подобный макет может быть воссоздан при помощи CSS-форм и регионов

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

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

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

Будущее веб-разработки выглядит все ярче и привлекательней с каждым днем. Хорошо быть веб-разработчиком!

Я надеюсь, что эта статья поможет вам войти в технический курс дела относительно CSS- форм и исключений. Это не последняя моя статья на эту тему. Комбинирование CSS-форм с другими передовыми технологиями мира CSS, такими как регионы, открывает двери в новый мир творческих идей и создания новых статей! ;)

5 интересных трюков CSS

Те, кто занимается разработкой сайтов уже некоторое время (скажем, пару лет), наверняка ловили себя на мысли, что они, по сути, делают примерно один и тот же макет. Да, тренды появляются и уходят, однако большинство сайтов все равно выглядят одинаково: почти все используют 12-колоночную сетку (привет, Bootstrap), адаптивную разметку и так далее. На подобные сайты уже скучновато смотреть, да и пользователям они не всегда удобны.

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

1 Режимы наложения CSS

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

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

  • overlay – наложение – светлые части становятся светлее, темные – темнее;
  • darken – затемнение – выбирается темное значение;
  • color-dodge – цветовое осветление – задний фон становится более ярким, за счет этого все изображение смотрится более контрастным.

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

Все возможные варианты наложения на примере смотрите тут .

Для того, чтобы задать режим наложения, нужно использовать mix-blend-mode:

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

Что делать, если с каким-то элементом режим наложения не нужен? Изолировать его:

Теперь к содержащему div изображению не будет применяться режим наложения.

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

2 Маскирование

Маскирование (masking) — это одна из популярных операций (наряду с отсечением), которая используется для скрытия части элемента. Части под маской будут частично или полностью непрозрачны. При помощи масок на странице можно создать изображение интересной, креативной формы.

Существует три способа сделать маскирование: использовать изображение с прозрачными частями (например, png), использовать CSS градиент либо SVG-элементы.

В отличие от растровых изображений, состоящих из пикселей, векторные изображения SVG можно масштабировать и изменять практически без потери качества.


Маску можно использовать для создания интересных эффектов. Например, если использовать вот такое изображение и маску:

То на странице при прокручивании вниз можно сделать так, чтобы буквы постепенно бледнели и заходили за скалы:

3 Отсечение

Отсечение (clipping) уже упоминалось выше — еще один способ поменять форму изображения. Принцип работы — все, что входит в выбранную область, будет отображено; все, что остается за краями, отображаться не будет.

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

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

Тем не менее свойство clip уже устарело — сейчас используется свойство clip-path.

Clip-path можно использовать либо на CSS (здесь доступны разные фигуры: polygon, circle, ellipse и так далее); либо на SVG (здесь для обертывания элемента будет использоваться элемент clipPath).

CSS

SVG

4 Формы CSS

Здесь речь пойдет о shape-outside и shape-inside.

Shape-outs >используется для того, чтобы создать внутри элемента форму, и вокруг этой формы и будет происходить обтекание.

А выглядеть это может вот так:

На странице shape-outside можно использовать, чтобы сделать вот такую красоту:

Shape-ins >, наоборот, создает форму, внутри которой будет происходить обтекание.

В целом использовать формы удобно и полезно — они могут внести значительное разнообразие в дизайн сайта. Можно сделать вот такие интересные изображения:

5 Анимация с использованием SVG

SVG — формат, который уже активно используется в вебе. Он векторный (SVG — Scalable Vector Graphics — масштабируемая векторная графика), а значит, изображение будет нормально отображаться на экране с любым разрешением.

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

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

У SVG, помимо прочих преимуществ, есть еще важное отличие от растровых изображений: текст, вставленный в SVG, хранится в теге

, то есть его можно найти, с ним можно взаимодействовать прямо в коде.

Создание SVG-анимации при помощи CSS в целом похоже на анимирование любого другого элемента в HTML: нужно использовать переходы, трансформацию и ключевые кадры.

Самое удивительное при работе с SVG: вы можете взять любую часть и анимировать ее при помощи CSS. А значит, можно делать интересные динамические эффекты даже без использования JS. SVG имеет собственное DOM API, и если вы хотите углубиться в изучение этой темы, обязательно остановите свое внимание на DOM API.

А для начала я советую изучить вот эту статью .

Примеры красочных анимированных рисунков смотрите здесь и здесь .

Заключение

В этой статье перечислены 5 интересных возможностей CSS — но, конечно, их гораздо больше, многое осталось за пределами этой статьи. А чем вы пользуетесь в разработке? Что используете, чтобы сделать сайт интереснее?

CSS Shapes module level 1 — свойство shape-outs > 13.12.2014 — 1 комментарий

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

CSS Shapes, module level 1

Первый модуль CSS Shapes включает в себя только свойство shape-outside и сопутствующие shape-margin , clip-path и shape-image-threshold .

Они позволяют сделать контейнер элемента не прямоугольным, а придать ему желаемую форму с помощью нескольких shape-функций:

  • circle() — правильная окружность;
  • ellipse() — эллипс с двумя радиусами;
  • polygon() — полигон из множества точек;
  • inset() — внутренний прямоугольник с возможностью скруглить углы;
  • url() — форма изображения с прозрачным фоном.

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

An Introduction to CSS Shapes

Until the introduction of CSS Shapes, it was nearly impossible to design a magazine-esque layout with free flowing text for the web. On the contrary, web design layouts have traditionally been shaped with grids, boxes, and straight lines.

CSS Shapes allow us to define geometric shapes that text can flow around. These shapes can be circles, ellipses, simple or complex polygons, and even images and gradients. A few practical design applications of Shapes might be displaying circular text around a circular avatar, displaying text over the simple part of a full-width background image, and displaying text flowing around drop caps in an article.

Now that CSS Shapes have gained widespread support across modern browsers, it’s worth taking a look into the flexibility and functionality they provide to see if they might make sense in your next design project.

First Look at CSS Shapes

The current implementation of CSS Shapes is CSS Shapes Module Level 1, which mostly revolves around the shape-outside property. shape-outside defines a shape that text can flow around.

Considering there is a shape-outside property, you might assume there is a corresponding shape-inside property that would contain text within a shape. A shape-inside property might become a reality in the future, but it is currently a draft in CSS Shapes Module Level 2, and is not implemented by any browser.

In this article, we’re going to demonstrate how to use the data type and set it with shape function values, as well as setting a shape using a semi-transparent URL or gradient.

Basic Shape Functions

We can define all sorts of Basic Shapes in CSS by applying the following function values to the shape-outside property:

In order to apply the shape-outside property to an element, the element must be floated, and have a defined height and width. Let’s go through each of the four basic shapes and demonstrate how they can be used.

Circle

We’ll start with the circle() function. Imagine a situation in which we have a circular avatar of an author that we want to float left, and we want the author’s description text to flow around it. Simply using a border-radius: 50% on the avatar element won’t be enough to get the text to make a circular shape; the text will still treat the avatar as a rectangular element.

With the circle shape, we can demonstrate how text can flow around a circle.

We’ll start by creating a circle class on a regular div , and making some paragraphs. (I used Bob Ross quotes as Lorem Ipsum text.)

In our circle class, we float the element left, give it an equal height and width , and set the shape-outside to circle() .

If we view the page, it will look like this.

As you can see, the text flows around the circle shape, but we don’t actually see any shape. Hovering over the element in Developer Tools will show us the actual shape that is being set.

At this point, you might assume that you can set a background color or image to the element, and you’ll see the shape. Let’s try that out.

Frustratingly, setting a background to the circle just gives us a rectangle, the very thing we’ve been trying to avoid.

We can clearly see the text flowing around it, yet the element itself doesn’t have a shape. If we want to actually display our shape functions, we’ll have to use the clip-path property. clip-path takes many of the same values as shape-outside , so we can give it the same circle() value.

For the rest of the article, I’ll use clip-path to help us identify the shapes.

The circle() function takes an optional parameter of radius. In our case, the default radius (r) is 50% , or 100px . Using circle(50%) or circle(100px) would produce the same result as what we’ve already done.
You might notice the text is right up against the shape. We can use the shape-margin property to add a margin to the shape, which can be set in px , em , % , and any other standard CSS unit of measurement.

Here is an example of a 25% circle() radius with a shape-margin applied.

In addition to the radius, a shape function can take a position using at . The default position is the center of the circle, so circle() would explicitly be written as circle(50% at 50% 50%) or circle(100px at 100px 100px) , with the two values being the horizontal and vertical positions, respectively.

To make it obvious how the positioning works, we could set the horizontal position value to 0 to make a perfect semi-circle.

This coordinate positioning system is known as the reference box.

Later on, we’ll learn how to use an image instead of a shape or gradient. For now, we’ll move on the to the next shape function.

Ellipse

Similar to the circle() function is the ellipse() , which creates an oval. To demonstrate, we can create an ellipse element and class.

This time, we set a different height and width to make a vertically elongated oval.

The difference between an ellipse() and a circle() is that an ellipse has two radii – rx and ry, or the X-axis radius and Y-axis radius. Therefore, the above example can also be written as:

The position parameters are the same for circles and ellipses. The radii, in addition to being a unit of measurement, also include the options of farthest-side and closest-side .

closest-side refers to the length from the center to closest side of the reference box, and conversely, farthest-side refers to the length from the center to the farthest side of the reference box. This means that these two values have no effect if a position other than default isn’t set.

Илон Маск рекомендует:  Структуры управления

Here is a demonstration of the difference of flipping closest-side and farthest-side on an ellipse() with a 25% offset on the X and Y axes.

Inset

So far we’ve been only been dealing with round shapes, but we can define inset rectangles with the inset() function.

In this example, we’ll create a 300px by 300px rectangle, and inset it by 75px on all sides. This will leave us with a 150px by 150px with 75px of space around it.

We can see that the rectangle is inset, and the text ignores the inset area.

An inset() shape can also take a border-radius with the round parameter, and the text will respect the rounded corners, such as this example with a 25px on all sides and 75px rounding.

Like padding or margin shorthand, the inset value will accept top right bottom left values in clockwise order ( inset(25px 25px 25px 25px) ), and only using a single value will make all four sides the same ( inset(25px) ).

Polygon

The most interesting and flexible of the shape functions is the polygon() , which can take an array of x and y points to make any complex shape. Each item in the array represents xi yi, and would be written as polygon(x1 y1, x2 y2, x3 y3. ) and so on.

The fewest amount of point sets we can apply to a polygon is three, which will create a triangle.

In this shape, the first point is 0 0 , the top left most point in the div . The second point is 0 300px , which is the bottom left most point in the div . The third and final point is 200px 300px , which is 2/3rd across the X axis and still at the bottom. The resulting shape looks like this:

An interesting usage of the polygon() shape function is that text content can flow between two or more shapes. Since the polygon() shape is so flexible and dynamic, this is one of the biggest opportunities to make truly unique, magazine-esque layouts. In this example, we’ll put some text between two polygon shapes.

Obviously, it would be very difficult to try to create your own complex shapes manually. Fortunately, there are several tools you can use to create polygons. Firefox has a built in editor for shapes, which you can use by clicking on the polygon shape in the Inspector.

And for now, Chrome has some extensions you can use, such as CSS Shapes Editor.

Polygons can be used to cut out shapes around images or other elements. In another example, we can create a drop cap by drawing a polygon around a large letter.

An exciting feature of CSS Shapes is that you don’t always have to explicitly define the shape with a shape function; you can also use a url of a semi-transparent image to define a shape, and the text will automatically flow around it.

It’s important to note that the image used must be CORS compatible, otherwise you’ll get an error like one below.

Serving an image on a server from the same server will ensure you don’t get that error.

Unlike in the other examples, we’re going to use an img tag instead of a div . This time the CSS is simple – just put the url() into the shape-outside property, like you would with background-image .

Since the image I used was a star with a transparent background, the text knew which areas were transparent and which were opaque, and aligned itself accordingly.

Gradients

Finally, a gradient can also be used as a shape. Gradients are the same as images, and just like the image example we used above, the text will know to flow around the transparent part.

We’re going to use one new property with gradients – the shape-image-threshold . The shape-image-threshold defines the alpha channel threshold of a shape, or what percent of the image can be transparent vs. opaque.

I’m going to make a gradient example that’s a 50%/50% split of a color and transparent, and set a shape-image-threshold of .5 , meaning all pixels that are over 50% opaque should be considered part of the image.

We can see the gradient is perfectly split diagonally at the center of opaque and transparent.

Conclusion

In this article, we learned about shape-outside , shape-margin , and shape-image-threshold , three properties of CSS Shapes. We also learned how to use the function values to create circles, ellipses, inset rectangles, and complex polygons that text can flow around, and demonstrated how shapes can detect the transparent parts of images and gradients.

You can find all examples of this article in the following demo. You can also download the source files.

Как Использовать CSS Формы в Вашем Веб-Дизайне

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

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

Давайте рассмотрим как модуль CSS форм (shapes) позволит нам добиться такого же результата на наших веб-страницах.

Быстрое Введение в CSS Формы

CSS Формы позволяют веб-дизайнерам создать более абстрактные, геометрические фигуры, помимо простых прямоугольников и квадратов. Спецификация предоставляет нам новые CSS свойства, включающие shape-outside и shape-margin . Поддержка браузеров приемлемая, свойства доступны в Chrome, Opera и Safari, с префиксом -webkit , и следовательно -webkit-shape-outside .

Свойство shape-outside позволит текстовому контенту обернуть вокруг (снаружи), изгиб элемента, а не привычную box model. Изначально, также существовал shape-inside , для обёртывания контента внутри элемента; текст внутри элемента представляет из себя круглую форму. Однако реализация была перенесена в CSS Формы Уровень 2.

Сверху вниз: shape-outside и shape-inside в действии.

Свойство shape-margin позволяет указать отступ вокруг формы использующей shape-outside .

Давайте посмотрим на некоторые примеры.

Создаём Форму

Самый простой способ посмотреть, как CSS формы работают, создать круг. В примере ниже div (наш круг), рядом с ним несколько параграфов.

Ниже вы можете видеть стили нашего круга, включая высоту и ширину, border-radius для придания формы элементу, а также float, чтобы параграф обтекал наш элемент.

Как мы и хотели, параграфы расположились вокруг элемента. Однако, так как свойство border-radius не создает в действительности форму нашего элемента, параграфы не формируют изгибы вокруг него.

Если мы посмотрим на элемент с помощью инструментов разработчика в нашем браузере, мы увидим, что элемент по факту всё ещё квадратный. Так что, не смотря на то что наш div выглядит, как круг, border-radius никак не поменял форму элемента.

Обратите внимание на прямоугольное выделение вокруг элемента.

Для того, чтобы параграф стал круглой формы, мы должны изменить форму самого элемента с помощью свойства shape-outside ; в нашем случае мы сделаем это передав функцию circle() в качестве значения.

Теперь наши параграфы аккуратно обтекают окружность круга.

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

Обратите внимание на тёмную область.

Добавив немного отступов, посмотрите, как это улучшит простую структуру.

Кастомизируем Круг

Функция circle() может принимать пару значений, для установки радиуса и центральных координат: circle(r at x y) . По умолчанию, значение радиуса берётся от размера элемента; если ширина элемента 300px , к примеру, радиус будет 150px (половина диаметра круга).

Похожим образом, координаты x и y измеряются в зависимости от размера элемента, по умолчанию 50% 50% ; прямо в центре элемента.

Круг находится в центре элемента.

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

Параграфы обтекают круг, согласно его размеру, заступая внутрь элемента. Откройте пример на CodePen.

Стоит отметить, что изменяя круг, координаты и радиус, оба значения должны быть указаны; лишь одно значение считается невалидным.

Box Model Форм

CSS Формы наследуют те же box model принципы, что и элемент, но они применяются отдельно от самого элемента. Это позволяет нам задать, скажем, элементу border-box , в то время как у формы будет padding-box . Для изменения box model, добавьте одно из ключевых слов после функции, content-box , margin-box , border-box или padding-box .

По умолчанию для box-model формы, установлено значение margin-box . В следующем примере мы изменили его значение на padding-box тем самым браузер будет знать, что мы не хотим учитывать отступы (margin) при определении размеров и диапазона формы. Параграф будет проходить через границы (border) и касаться padding’а элемента.


Оранжевый квадрат — это отступы (margin), жёлтый квадрат — это рамки (border), а зелёный квадрат — это padding.

Я настоятельно рекомендую обратить внимание на наш бесплатный курс Основы CSS Box Model, если хотите узнать больше о том, как box-model работает.

Создаём Больше Форм

В спецификация CSS Форм есть и другие функции для указания формы:

  • ellipse() : Из названия понятно, что эта функция создаст форму эллипса. Мы можем задать радиус эллипса, а также переместить координаты центра. Но в отличии от функции circle() , для ellipse() нужно указать два значения для радиуса, горизонтальный и вертикальный, ellipse( 100px 180px at 10% 20% ) .
  • polygon() : позволяет вам создавать более сложные формы, такие как треугольник, шестигранники, а также не геометрические формы. Использовать polygon не так просто, как создать круг, но инструмент — Конвертер Путей для Многоугольника делает процесс более интуитивным.

На Последок

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

  • Как упоминалось ранее, в этой статье, свойство shape-insde CSS Форм, позволяющие контенту обтекать форму изнутри, использовать пока рано.
  • Также спецификация CSS Форм предоставляет отдельное свойство shape-box , для установки box-model формы, однако на данный момент оно не поддерживается ни одним из браузеров.
  • Для Safari необходимо добавлять -webkit- префикс, тем самым давая понять, что данные свойства пока что считаются экспериментом.

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

Создаем крутые фигуры с помощью Clip-Path и разбиваем привычную боксовую модель.

Перевод статьи Karen Menezes Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box. Публикуется с разрешения автора. Ссылка на оригинальную статью указана выше. С момента написания статьи 11.05.2015 статус спецификации не изменялся.

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

Несмотря на то что основным объектом этой статьи является использование clip-path для создания многоугольников с помощью CSS, все примеры поддерживают инлайновый SVG, для дополнительной поддержки в Firefox. Создание отзывчивых фигур с помощью SVG — простая задача, если вы хоть раз использовали CSS clip-path .

Clip-Path, в общих чертах

Вырезать фигуры, свойством clip-path , сродни вырезанию фигур (таких как круг или пятиугольник) из прямоугольного куска бумаги. Это свойство находится в спецификации “CSS Masking Module Level 1”. Состояние спецификации, “CSS masking поддерживает два значения для частичного или полного скрытия частей визуальных элементов: маскирование и обрезка”.

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

Вторая часть, т.е. clip-path , задействует замкнутый контур, который может быть базовой фигурой определенной в CSS или SVG используя тэг clipPath. Область внутри контура отобразится, а все что снаружи будет отсечено.

Примечание: Маскирование выходит за пределы этой статьи, но на CSS-Tricks и HTML5 Rocks можно найти более подробную информацию.
Ниже простая визуализация работы clip-path :

Примечание: примеры из этой статьи, включая указанный выше, будут работать в Firefox а также в WebKit и Blink браузерах, включая Chrome, Safari и Opera.

Clip-Path это вам не Clip

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

Пример использования устаревшего синтаксиса:

В августе 2014, спецификация “CSS Masking Module” была опубликована как “Candidate Recommendation,” это шаг вперед по сравнению с ранним черновиком “Last Call Working Draft”. До того как мы посмотрим на поддержку в браузерах, важно рассмотреть разные способы применения clip-path к элементу, потому что поддержка в браузерах варьируется в зависимости от этих способов.

Есть два способа применения clip-path:

  1. Базовые фигуры CSS из “CSS Shapes Module” предоставляют удобный способ использования clip-path. Доступны следующие варианты фигур: polygon, circle, ellipse и inset; inset для прямоугольных фигур.
  2. С помощью SVG можно, в качестве альтернативы, создать фигуру используя SVG и затем обрезать элемент по этой фигуре используя синтаксис URL. Есть два способа реализации:
  • ссылкой на инлайновый SVG (т.е. SVG разметка будет размещена прямо на странице)
  • ссылкой на внешний SVG документ. В обоих случаях, элемент clipPath внутри SVG используется чтобы обернуть элемент который определяет фигуру обрезки, будь то круг, многоугольник, или другой элемент.

Сравните демо ниже в Firefox и в WebKit или Blink браузере, например Chrome, чтобы почувствовать разницу. Квадратные изображения означают ошибку при поддержке браузером. Примечание: третье изображение не показывается в Safari. Несмотря на широкий дебаггинг, решить проблему не удалось. Я была бы благодарна, если в секции комментов встретилось решение.

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

    с CSS: Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Andro >Свойство clip-path пока не поддерживается Internet Explorer, но находится на рассмотрении как часть “Masking Module.”

Примечание: Есть оговорка насчет поддержки SVG для клиппирования. Современные WebKit и Blink браузеры поддерживают клиппирование с SVG только если SVG — инлайновый (т.е. внутри документа). Ссылки на внешние SVG поддерживаются только в Firefox, что подтверждается в примере кода выше. Проект Chromium знает об этом баге и работает над ним.

Давайте посмотрим преимущества CSS и SVG при использовании clip-path.

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

Пока CSS предлагает свойство background-clip, которое поддерживает множество вариантов (включая нестандартные способы обрезки текста), ни background-clip ни CSS’ clip-path не достигают того, что можно сделать с помощью SVG обрезки в современных браузерах. Знакомство с clip-path через CSS, тем не менее, не такое пугающее (особенно если вы не знакомы с манипуляциями SVG) и подготовит вас к тонкостям клиппирования с SVG, также как в “CSS Shapes Module,” где содержимое выравнивается по форме элемента.

Примечание: если вам не терпится окунуться во все тонкости SVG, обзор Sara Soueidan будет хорошим началом.

Давайте посмотрим на плюсы и минусы clip-path чтобы постепенно улучшить наш дизайн.

  • Браузеры, не поддерживающие свойство clip-path будут его игнорировать. Если вы используете его с осторожностью, пользователи неподдерживаемых браузеров ничего не заподозрят. Таким образом событие клика ограничено фигурой и ее внешними границами. Мы увидим это в примерах кода ниже.
  • Вы можете использовать проценты или любые другие единицы длины такие как px или em, для определения координат с базовыми фигурами CSS. Относительные единицы такие как проценты могут быть использованы для создания отзывчивых фигур, идеальных для адаптивного дизайна.
  • Все границы, тени и контуры снаружи области обрезки будут отсечены. Вы можете добавить границу и ожидать что это будет выполнено. Посмотрим на некоторые альтернативы ниже.
  • Спецификация еще не достигла стадии “Recommendation”, так что всегда есть шанс, что синтаксис будет временно изменен.
  • Сообщалось о нескольких багах при использовании clip-path и 3Д трансформаций, переходов и проразчности, они будут рассмотрены в примерах далее. Будьте осторожны и избегайте комбинировая свойств, которые могут спровоцировть эти проблемы.

Clip-Path с использованием polygon: использование и синтаксис

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

Базовый синтаксис для многоугольника выглядит следующим образом:

Каждая пара аргументов в списке представляет координаты по осям x и y вершин многоугольника.

Вот — как это выглядит в реальном мире (не считая текущей поддержки версии с префиксом WebKit):

Добавим поддержку для Firefox с помощью ссылки на инлайновый SVG:

Вот как выглядит наш селектор с кроссбраузерной поддержкой:

Ниже представлен код инлайнового SVG, который необходимо добавить в разметку.

И окончательный пример кода с многоугольником:

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

  • Установите width и height для SVG в 0.
  • Назначьте ID для clipPath элемента внутри SVG, на который можно ссылаться в CSS. Вы можете использовать инлайновый или внешний SVG, держа в уме поддержку браузеров, о которой говорилось ранее.
  • Используйте значения координат в процентах назначенные в CSS clip-path. Просто делите их на 100 и уберите единицы измерения SVG.
    Установите значения атрибута clipPathUnits для objectBoundingBox, таким образом фигура обрезки послужит границами HTML элемента на который она ссылается.

Dudley Storey может рассказать больше об этом.

Давайте посмотрим на примере как составить координаты для многоугольника.

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

Реальные примеры использования Clip-Path

Примечание: Каждый пример кода в этой статье использует clip-path с CSS но также имеет инлайновый SVG в разметке с классом clip-svg, который просто обнуляет значения высоты и ширины SVG. В качестве альтернативы, вы можете удалить класс и обнулить высоту и ширину прямо в разметке SVG.

Пример 1: Обрезаем изображение до разных многоугольных фигур

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

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

Примечание: Изображения в примерах — отзывчивые. Используя решение для отзывчивости изображений img < max-width: 100%; height: auto; >и адаптивные области обрезки для CSS и SVG, мы делаем наши многоугольники пропорционально уменьшающимися и увеличивающимися.

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

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

Пример 2: Анимация базовых фигур с помощью переходов CSS

Наведите курсор на фиолетовый шестиугольник. Он трансформируется в восьмиугольник. Тем не менее, переход CSS не сработал.

Причина такого поведения объяснена в статье Sara Soueidan об анимации фигур CSS : “ Число точек конечной фигуры должно соответствовать числу точек начальной фигуры.” Это вполне разумно!

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

Так выглядит стандартное объявление шести пар координат для шестиугольника:

А это объявление шестиугольника с восемью парами координат (первые две вершины продублированы):

Теперь, при трансформации фигуры, переход будет плавным, как в примере ниже.

Примечание: Для браузеров поддерживающих области обрезки через SVG (а именно Firefox), нам понадобится добавить SMIL анимацию для реализации перехода при наведении. Согласно SMIL спецификации, анимации могут использоваться для изменения контуров и точек фигур SVG, которое невозможно выполнить средствами CSS.

Помните, что некоторые осуждают использование SMIL в Chrome и Chromium при этом фокусируясь на внедрении Web Animations API, которое, к сожалению, пока на стадии раннего черновика.

В примере ниже, вы можете увидеть, что мы анимировали вершины многоугольника между событиями указателя мыши mouseover и mouseout events в течение 0.2 секунд. Обратите внимание на тэг в SVG разметке.

Пример 3: Добавляем границы для обрезанного объекта.

Короче, границы, контуры и тени that находящиеся снаружи обрезаемой области будут удалены.

Меня немного опечалил этот факт, и я решила отправить запрос представителям W3C рабочей группы CSS. Тем не менее, в итоге оказалось, что нет способа реализовать это при использовании базовых фигур. Dirk Schulze ответил на мой запрос: “Да, все операции отрисовки,которые принадлежали элементу будут обрезаны. Это включает контуры и границы.”

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

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

В примере ниже создается копия элемента через псевдо-элемент (content:after) с абсолютным позиционированием. Получается иллюзия границы, позволяя нам использовать интересные эффекты, такие как граница с градиентом во втором восьмиугольнике и добавление тени с помощью CSS фильтра на третьем (не очень симпатично, зато работает). Заметьте, что that CSS фильтры на текущий момент работают только в Firefox и в WebKit и в Blink браузерах.

Пример 4: Используем CLIP-PATH для создания “бриллиантовой” сетки из ромбов.

Ниже изображение которое мы будем использовать.

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

Актуальный размер изображения составляет 600 × 600 пикселей. Значит, давайте начнем с четырех пустых дивов по 300 пикселей каждый и применим к ним одинаковое фоновое изображение. Еще добавим родительский контейнер размером 604 пикселя и разместим изображения с применением свойства `inline-block`.

Теперь, изменим значение свойства background-position для каждого изображения на top , left , right и bottom , соответственно.

Давайте обрежем каждый блок по фигуре ромба.

Мы перекроем абсолютно спозиционированным слоем три нижних изображения, с небольшим текстом.

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

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

Работая над эти примером, я заметила баг в Chrome с направленным pointer-events вне обрезанной области, что является нарушением спецификации: “По умолчанию, pointer-events не должно ссылаться на отсеченные (неотображаемые) области фигуры.” Я получила ошибку. Проблема в этом примере решена использованием свойства pointer-events со значением none для слоя наложения. В качестве альтернативы, вы можете применить такое же значение clip-path для слоя наложения. Чтобы решить проблему.

Из-за применения отрицательных отступов, этот пример может выглядеть странно в браузерах, не поддерживающих clip-path . Вам нужно использовать что-то типа проверки возможности использования clip-path для применения отступов (хотя, я этого не пробовала) или использовать запрос для CSS @supports, хотя последнее я не рекомендую использовать в продакшене.

Пример 5: Делаем глупую страничку профиля с шестиугольниками.

В результате наша страница должна выглядеть так:

Начнем с добавления фонового изображения из шестиугольных плиток для body (спасибо за изображение Subtle Patterns).

Значения шестиугольника для clip-path могут быть получены из примеров ниже или с помощью Clippy tool.

Первый шестиугольник использует фоновое изображение (т.к. мы подмешиваем скучный бордовый в фон используя свойство background-blend-mode ). Используя полученное содержимое, абсолютно спозиционированный перекрывающий слой обрезается до бордового треугольника, который вы видите внизу. Он исчезает при наведении курсора.

Второй шестиугольник, со словом “work,” просто содержит серый фон, который меняется при наведении.

У третьего шестиугольника есть граница с градиентом, так же как и в одном из примеров с созданием границ с помощью clip-path .

Шестиугольники складываются на маленьких экранах и центрируются по вертикали на экранах побольше. Я использовала комбинацию свойства display : table и хака для абсолютного центрирования — конечно, вы можете использовать flexbox , floats или что-то еще, что поможет удержать ваш корабль верстки “на плаву”.

Вот итоговый пример кода.

Я обнаружила баг clip-path при создании этого примера. Изменение значения свойства opacity в сочетании с переходами CSS провоцирует мигание и артефакты на странице. Избегайте этого, если вы используете clip-path чтобы улучшить дизайн.

Также есть проблема при использовании clip-path и свойства backface-visibility если его установить в значение hidden . Этот баг указан в баг трекере Chromium и мне удалось его воспроизвести используя основной синтаксис для фигур в Chrome на Linux. Помните об этом если используете clip-path фигуру для создания крутого 3D поворота или чего нибудь, что использует 3D трансформации CSS.

Обрезка с помощью SVG без труда побеждает из-за ее гибкости иnи вариаций, но ничто не сравнится с легкостью,с которой элемент может быть обрезан с помощью CSS. Фактически, те же координаты для многоугольника могут быть играючи преобразованы для создания отзывчивого SVG и лучшей поддержки браузерами. С clip-path , вы можете кардинально менять вид и поведение страницы, не слишком волнуясь о поддержке браузерами, где она ухудшена. При выборе clip-path для улучшения дизайна, следите за статусом спецификации, возможно она продвинется до статуса “Recommendation”.

Ресурсы, Инструменты и Вдохновение

  • CSS Masking Module Level 1 W3C лучший источник истины при возникновении сомнений.
  • Clipping in CSS and SVG: The clip-path Property and ` ` Element Подробное руководство Sara Soue >clip-path , без помощи canvas или WebGL . Пока остальные браузеры не подхватятся смотрите ее в WebKit или Blink браузерах.

CSS Shapes

On this Page

CSS Shapes describe geometric shapes for use in CSS. For the Level 1 specification, CSS Shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element’s box.

Basic example

The example below shows an image that has been floated left, and the shape-outside property applied with a value of circle(50%) . This creates a circle shape, and the content wrapping the float now wraps around that shape. This changes the length of the wrapping text’s line boxes.

Илон Маск рекомендует:  Что такое код asp logmoduleuiid

CSS Shapes Module Level 1

W3C Cand > 20 March 2014

Abstract

CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document was produced by the CSS Working Group as a Candidate Recommendation.

A Candidate Recommendation is a document that has been widely reviewed and is ready for implementation. W3C encourages everybody to implement this specification and return comments to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text “css-shapes-1” in the subject, preferably like this: “[ css-shapes-1 ] …summary of comment…

Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This specification will not progress to Proposed Recommendation before 20 September 2014. See the section “CR exit criteria” for details.

For changes since the last draft, see the Changes section.


Table of Contents

1 Introduction

This section is not normative.

Shapes define arbitrary geometries that can be used as CSS values. This specification defines properties to control the geometry of an element’s float area. The shape-outs > Note: Future levels of CSS Shapes will allow use of shapes on elements other than floats. Other CSS modules can make use of shapes as well, such as CSS Masking [CSS-MASKING] and CSS Exclusions [CSS3-EXCLUSIONS].

This module extends the float features defined in [CSS21] chapter 9.

1.2 Values

This specification follows the CSS property definition conventions from [CSS21]. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 [CSS3VAL].

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the inherit keyword as their property value. For readability it has not been repeated explicitly.

1.3 Animated Values

It is expected that CSS will include ways to animate transitions between styles. (The section «Animation of property types» of the CSS Transitions module [CSS3-TRANSITIONS] is expected to define how different kinds of values are interpolated during a transition.) In anticipation of that, this module includes a line «Animatable» for each property, which specifies whether and how values of the property can be animated.

1.4 Terminology

This specification uses the term wrap to refer to flowing content around the sides of a float area, defined in [CSS21] chapter 9. Content wraps around the right side of a left-floated box, and content wraps around the left side of a right-floated box. One result of this wrapping is that line boxes next to a float are shortened as necessary to avoid intersections with the float area.

The area used for wrapping content around a float element. The rules for float behavior use the s >2 Relation to the box model and float behavior

While the boundaries used for wrapping inline flow content outside a float can be defined using shapes, the actual box model does not change. If the element has specified margins, borders or padding they will be computed and rendered according to the [CSS3BOX] module. Also, float positioning and stacking are not affected by defining a float area with a shape.

When a shape is used to define a float area, the shape is clipped to the float’s margin box. In other words, a shape can only ever reduce a float area, not increase it. A reduced float area may have no effect on some line boxes that would normally be affected by the float. An (where the shape encloses no area) has no effect on line boxes.

A float area defined by a shape may reduce the normal float area on all s >

In the following example the left and right floating img elements specify a triangular shape using the shape-outside property.

Since shapes are clipped to the float’s margin box, adding this shape to the left float above would result in the same rendering.

A shape with no extent will create a float area with no extent. Because wrapping only considers the float area, either shape below applied to a float will allow inline content to flow through all of the float’s box.

A shape-outside can create open areas on both the left and right of a float area. Content still wraps only on one side of a float in this case. In the picture, the shape is rendered in blue, and the content area outside the shape in mauve.

The following styling creates a shape much smaller than the float’s content area, and adds a margin-top to the float. In the picture, the shape is rendered in blue, the content area outside the shape in mauve, and the margin area of the float box in yellow. The inline content only wraps around the shape, and otherwise overlays the rest of the float margin box.

The next picture shows a possible result if two of these floats were stacked next to each other. Note that the floats are positioned using their margin boxes, not the float area.

3 Basic Shapes

The type can be specified using basic shape functions. When using this syntax to define shapes, the is defined by each property that uses «> values. The coordinate system for the shape has its origin on the top-left corner of the reference box with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.

3.1 Supported Shapes

The following shapes are supported. All «> values use functional notation and are defined here using the Value Definition Syntax. = inset( «><1,4>[round ]? ) Defines an inset rectangle.

  • When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.
  • The optional argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.

A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. = circle( [«> ]? [at «>

]? )

  • The shape-radius argument represents r, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as
    sqrt(width 2 +height 2 )/sqrt(2) .
  • The position argument defines the center of the circle. This defaults to center if omitted.

= ellipse( [«><2>]? [at «>

]? )

  • The shape-radius arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.
  • The position argument defines the center of the ellipse. This defaults to center if omitted.

= polygon( [«> ,]? [«>»> ]# )

  • — The filling rule used to determine the interior of the polygon. See fill-rule property in SVG for details. Possible values are nonzero or evenodd . Default value when omitted is nonzero .
  • Each pair argument in the list represents xi and yi — the x and y axis coordinates of the i-th vertex of the polygon.

The UA must close a polygon by connecting the last vertex with the first vertex of the list.

At least three vertices are required to define a polygon with an area. This means that (for this specification) polygons with less than three vertices (or with three or more vertices arranged to enclose no area) result in an empty float area.

The arguments not defined above are defined as follows: = «> | «>

| closest-side | farthest-side Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.

  • uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.
  • uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

3.2 Computed Values of Basic Shapes

The values in a «> function are computed as specified, with these exceptions:

  • Omitted values are included and compute to their defaults.
  • A «>

value in circle() or ellipse() is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.

  • A value in inset() is computed as an expanded list of all eight «> or percentage values.
  • 3.3 Serialization of Basic Shapes

    To serialize the «> functions, serialize as per their individual grammars, in the order the grammars are written in, avoiding calc() expressions where possible, avoiding calc() transformations, omitting components when possible without changing the meaning, joining space-separated tokens with a single space, and following each serialized comma with a single space.

    values in ellipse() and circle() serialize to their 2- and 4-value forms only, preferring the 2-value form when it can be expressed without calc(), preferring left and top origins, and preferring 0% over a zero length.

    keywords stand in for percentages, keywords without an offset turn into percentages.

    Omitting components means that some default values do not show up in the serialization. But since «>

    always uses the 2- or 4-value form, a default «>

    Using grammar order means that «>

    values always give horizontal components first, then vertical.

    Avoiding calc() expressions means that some «>

    values that could be simplified to the 2-value form must be serialized in 4-value form instead.

    Avoiding calc() transformations means that if a specified (or computed) calc() must stay in calc() form, it will be used as-is, not reformulated with a different origin or reduced.

    Preferring 0% over a zero length comes up when you must supply an omitted offset.

    Preferring left and top origins means that some percentage offsets will normalize to those origins (when calc can be avoided).

    3.4 Interpolation of Basic Shapes

    For interpolating between one basic shape and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as length, percentage, or calc where possible. If list values are not one of those types but are >nonzero in the same list position in both lists) those values do interpolate.

    • Both shapes must use the same reference box.
    • If both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions.
    • If both shapes are of type inset(), interpolate between each value in the shape functions.
    • If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same «> , interpolate between each value in the shape functions.
    • In all other cases no interpolation is specified.

    4 Shapes from Image

    Another way of defining shapes is by specifying a source «> whose alpha channel is used to compute the shape. The shape is computed to be the path or paths that enclose the area(s) where the opacity of the specified image is greater than the shape-image-threshold value. The absence of any pixels with an alpha value greater than the specified threshold results in an empty float area. If the shape-image-threshold is not specified, the initial value to be considered is 0.0.

    The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size.

    For animated raster image formats (such as GIF), the first frame of the animation sequence is used.

    An image is floating to the left of a paragraph. The image shows the 3D version of the CSS logo over a transparent background. The logo has a shadow using an alpha-channel.

    The image defines its float area through the shape-outside property.

    The shape-outside property re-uses the url from the src attribute of the img element.

    It is perfectly possible to display an image and use a different image for its float area.

    In the figure below, the alpha-channel threshold is represented by the dotted line around the CSS logo.

    It’s then possible to affect where the lines of the paragraph start in three ways:

    1. Modifying the alpha channel in the image
    2. Changing the value of the shape-image-threshold property
    3. Changing the value of the shape-margin property (see example 8)

    A float shape around an image using its alpha-channel.

    5 Shapes from Box Values

    Shapes can be defined by reference to edges in the CSS Box Model. These edges include border-radius curvature [CSS3BG] from the used border-radius values. The «> value extends the «> value to include margin-box. Its syntax is:

    The definitions of the values are:

    The value defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values. If the ratio of border-radius/margin is 1 or more, then the margin box corner radius is border-radius + margin . If the ratio of border-radius/margin is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)) .

    The value defines the shape enclosed by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border.

    The value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border.

    The value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius — border-width — padding .

    Given the 100px square below with 10px padding, border and margins, the box values define these shapes:

    • margin-box: the shape containing all of the yellow pixels
    • border-box: the shape containing all of the black pixels
    • padding-box: the shape containing all of the mauve pixels
    • content-box: the shape containing all of the blue pixels

    Simple CSS Box Model Edges

    And the same definitions apply to a more complex example with the same 100px square, but with these border, padding and margin properties: Complex CSS Box Model Edges

    The difference between normal float wrapping and wrapping around the shape defined by the margin-box value is that the margin-box shape includes corner shaping. Take the 100px square with 10px padding, border and margins, but with a border-radius of 60px. If you make a left float out of it, content normally wraps in this manner:

    Normal float wrapping

    If you add a margin-box shape to the float, then content wraps around the rounded margin-box corners. Float wrapping with margin-box

    6 Declaring Shapes

    Name:
    Value: none | [ «> || «> ] | «>
    Initial: none
    Applies to: floats
    Inherited: no
    Media: visual
    Computed value: as defined for «> (with «> following, if supplied), the «> with its URI made absolute, otherwise as specified.
    Animatable: as specified for «> , otherwise no

    The values of this property have the following meanings: The float area is unaffected. «> If one of these values is specified by itself the shape is computed based on one of margin-box, border-box, padding-box or content-box which use their respective boxes including curvature from border-radius, similar to background-clip [CSS3BG]. The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon(). If a «> is also supplied, this defines the reference box for the «> function. If «> is not supplied, then the reference box defaults to margin-box. The shape is extracted and computed based on the alpha channel of the specified «> as defined by shape-image-threshold.

    User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all URLs in a shape-outside value. When fetching, user agents must use «Anonymous» mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.

    6.2 Choosing Image Pixels: the shape-image-threshold property

    The shape-image-threshold defines the alpha channel threshold used to extract the shape using an image. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.

    Name:
    Value: «>
    Initial: 0.0
    Applies to: floats
    Inherited: no
    Media: visual
    Computed value: The same as the specified value after clipping the «> to the range [0.0,1.0]
    Animatable: as number

    The values of this property have the following meanings: Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. A threshold value outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

    Note: A future level of CSS Shapes may define a switch to use the luminance data from an image instead of the alpha data. When this happens, shape-image-threshold will be extended to apply its threshold to either alpha or luminance, depending on the switch state.

    6.3 Embiggening a Shape: the shape-margin property

    The shape-margin property adds a margin to a shape-outs >

    Name: Value: «> | «> Initial: 0 Applies to: floats Inherited: no Media: visual Computed value: the absolute length Animatable: as length, percentage, or calc.

    Sets the margin of the shape to the «> . Sets the margin of the shape to a percentage of the width of the element’s containing block.

    A shape-margin creating an offset from a polygonal shape-outside. The lighter blue area shows the shape in a 100x100px float, and the darker blue area shows the 10px offset.

    If shape-margin is added to the CSS logo from example 6, the line boxes wrapping around the shape are shortened further. A float shape around an image using its alpha-channel with a 35-pixel shape-margin

    Acknowledgments

    This specification is made possible by input from Andrei Bucur, Alexandru Chiculita, Elika Etemad, Arron Eicholz, Sylvain Galineau, Daniel Glazman, Arno Gourdol, Zoltan Horvath, Chris Jones, Bem Jones-Bey, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea Ov > Change Log

    Since February 11th 2014

    • Replaced divs with images in the first example
    • Add 0px to last serialization example

    Since December 3rd 2013

    • Updated computed value and serialization of basic shapes
    • Added a margin-box example
    • Change auto to none for shape-outs > Since June 20th 2013
    • Added shape from box value section
    • Updated basic-shape interpolation
    • Allow negative insets, disallow negative radii
    • Changed relevant to reference
    • Remove box-sizing dependency, add relevant box keywords
    • Changed circle() and ellipse() to use radial gradient syntax
    • Postponed rectangle() to level 2
    • Clarified shape-from-image sizing and positioning
    • Change inset-rectangle() to inset()
    • Future-proof shape-image-threshold to possibly apply to luminance
    • Added CORS fetching to shape-outside URLs
    • Changed shape-outside value from to
    • Remove ‘percentages based on auto-sizing resolve to 0’
    • Change initial value of shape-image-threshold to 0.0
    • Change float positioning to be unaffected by shape-outs > Since May 3rd 2012
    • Postpone shapes from SVG elements to a future Shapes level
    • Postpone shape-ins > Since December 13th 2011
    • Clarified processing model.
    • Clarified interaction with floats.
    • Clarified that an exclusion element establishes a new block formatting context.

    Conformance

    Document conventions

    Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words «MUST», «MUST NOT», «REQUIRED», «SHALL», «SHALL NOT», «SHOULD», «SHOULD NOT», «RECOMMENDED», «MAY», and «OPTIONAL» in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

    All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

    Examples in this specification are introduced with the words «for example» or are set apart from the normative text with , like this:

    This is an example of an informative example.

    Informative notes begin with the word «Note» and are set apart from the normative text with , like this:

    Note, this is an informative note.

    Conformance classes

    Conformance to this specification is defined for three conformance classes: style sheet A CSS style sheet. renderer A UA that interprets the semantics of a style sheet and renders documents that use them. authoring tool A UA that writes a style sheet.

    A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

    A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

    An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the indiv > Partial implementations

    So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

    Experimental implementations

    To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.

    Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.

    Non-experimental implementations

    Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

    To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

    Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

    CR exit criteria

    For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms: independent each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement. interoperable passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review. implementation a user agent which:

    1. implements the specification.
    2. is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or «nightly build»). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability.
    3. is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward).

    The specification will remain Cand > References

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL