1. Отсечение в CSS 2.1
2. Свойство clip-path
3. Анимация клипа
4. маскировка
5. Маска яркости
6. Альфа маска
7. Свойство маски
8. Свойство mask-border
9. Поддержка браузера
10. Подтверждение

В компьютерной графике обычно используются две операции: вырезание и маскирование. Обе операции скрывают визуальные части элемента. Если вы работали с SVG или HTML Canvas раньше, эти операции, вероятно, не новы для вас. Отсечение определяет область видимого элемента. Все вокруг этого региона не отображается - оно «обрезается». При маскировании изображение маски комбинируется с элементом, влияющим на альфа-канал этого элемента. Части маскированного элемента становятся полностью или частично прозрачными. Новый CSS Masking спецификация направлена ​​на то, чтобы перенести эти две операции в мир HTML.

Отсечение в CSS 2.1

CSS 2.1 уже указано свойство клипа. Это свойство ограничено прямоугольным отсечением с помощью функции rect (), принимающей четыре аргумента расстояния для верхнего, правого, нижнего и левого краев. Раздражающая часть: свойство clip применяется исключительно к абсолютно позиционированным элементам. Свойство просто игнорируется для других элементов.

CSS:

HTML:

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

Свойство clip-path

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

Элемент <clipPath> берет любой графический элемент из SVG и использует их в качестве области отсечения. Графическими элементами в SVG являются <rect>, <circle>, <ellipse>, <path>, <polygon>, <image> и <text>. <clipPath> также позволяет комбинировать несколько графических элементов. Объединение всех форм затем используется в качестве области отсечения. В следующем примере демонстрируется использование <clipPath>:

CSS:

HTML:

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

• inset (&lt;top> <right> <bottom> <left> [round <border-radius>]?) определяет прямоугольник, аналогичный функции rect () клипа. Параметры описывают смещения сверху, справа, снизу и слева. Функция также имеет необязательные параметры радиуса с синтаксисом граница радиуса собственность для округлые ректы ,
• circle (&lt;r>? [at <position>]?) определяет простой круг с необязательным параметром радиуса. Кроме того, необязательный параметр положения описывает центральную точку круга. <position> имеет тот же синтаксис, что и фон положение свойство.
• эллипс (&lt;rx> <ry>? [at <position>]?) определяет эллипс с горизонтальным и необязательным вертикальным радиусом, а также центральную точку на основе фон положение Синтаксис свойства.
• многоугольник (<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) определяет многоугольник на основе параметров списка точек.

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

Разметка CSS может выглядеть следующим образом:

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

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

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3
• Элемент списка 4
• Элемент списка 5
• Элемент списка 6
• Элемент списка 7
• Элемент списка 8
• Элемент списка 9

Прокрутите список, чтобы увидеть эффект.

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

Анимация клипа

Базовые фигуры и содержимое элемента <mask> можно анимировать. Следующий пример имеет анимацию в форме звезды:

Вот исходный код для анимации базовой фигуры:

маскировка

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

Маска яркости

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

Альфа маска

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

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

Спецификация CSS Masking определяет два сокращенных свойства для маскировки: mask и mask-border.

Свойство маски

Свойство mask объединяет маскирование изображения со ссылкой на маску следующим образом.

Первый способ - использование свойств mask-image, mask-repeat, mask-position, mask-clip, mask-origin и mask-size, которые задаются аналогично фону контраргумента с background-image. Как и для background-image, можно определить несколько источников маски. Каждый источник маски представляет собой изображение, определяемое CSS3 изображения , Все источники маски будут объединены в одно изображение маски. Это изображение маски используется для маскировки элемента и его содержимого, как описано выше. Возможные значения изображения - любой формат растрированного изображения, такой как JPG или PNG, графика SVG, или предварительно определенные значения изображения, такие как градиенты CSS.

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

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

Второй способ ссылается на элемент <mask>, как определено SVG 1.1 , Элемент <mask> берет любой графический элемент, а также группирует элементы из SVG и использует их для создания изображения маски.

CSS:

HTML:

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

Свойство mask-border

Свойство mask-border позволяет разделить изображение маски на 9 плиток: четыре угла, четыре ребра и средний кусок. Эти кусочки могут быть нарезаны, масштабированы и растянуты различными способами, чтобы соответствовать размеру области изображения маски. Свойство заимствует функциональность у border-image и позволяет мощно маскировать края и углы содержимого. В следующем примере демонстрируется поведение свойства:

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

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

Поддержка браузера

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

Все браузеры поддерживают клип, как указано. Все браузеры поддерживают маску и свойства пути клипа, как указано в SVG 1.1 на элементах SVG. Но только один браузер позволяет применять свойства к элементам HTML: Firefox (вроде). Давайте углубимся в детали.

Clip-path и свойство mask со ссылками на элементы <clipPath> и <mask> работают в Firefox "из коробки"; оба свойства без префикса. С другой стороны, mask-image, mask-border и связанные свойства вообще не поддерживаются. Основные формы для отсечения также не поддерживаются.

Браузеры на основе Blink и WebKit, такие как Chrome и Safari, имеют поддержку mask-image, mask-border (в настоящее время называется -webkit-mask-box-image в обеих реализациях) и связанных свойств. Все они имеют префикс и могут быть применены только к элементам HTML. Ночные сборки обоих браузеров уже поддерживают свойство с префиксом -webkit-clip-path с базовыми фигурами и ссылками на элементы <clipPath> в HTML. WebKit поддерживает дополнительные ключевые слова размера блока.

Если вы хотите попробовать обрезку и маскирование, убедитесь, что вы используете префиксные и нефиксированные свойства. Нефиксированные свойства должны использовать ссылку на <mask> или <clipPath> в данный момент.

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

Подтверждение

Большое спасибо Арно Гурдолу за предоставленную картину с Могила Хумаюна ,

Похожие