Clip

Совместимость

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Демонстрация

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

В первом примере используем:

• Свойство
• Переходы CSS
• Селектор или

Сначала изображение скрыто с помощью обрезки. Затем, при наведении курсора мыши на кнопку  изображение разворачивается за  0.5с от центра.

<iframe style=»width: 100%; height: 350px»      src=»http://jsfiddle.net/zNcTR/4/embedded/result,html,css,js»></iframe>

Эффектно? Второй пример показывает более реалистичное применение свойства вместе с другими селекторами и переходами.

В следующем уроке мы сделаем вполне реальное приложение с использованием свойства .

Поддержка clip-path

В августе 2014 года «CSS Masking Module» был опубликован как «Возможная рекомендация», что является шагом вперёд по сравнению с ранним этапом «Рабочий проект»

Прежде чем мы посмотрим на поддержку браузерами, важно рассмотреть несколько способов, как clip-path может применяться к элементу, поскольку поддержка браузером зависит от каждого метода

Существует два способа использования clip-path.

1. на CSS

Основные фигуры из «» обеспечивают удобный способ использования clip-path. Доступны разные фигуры: polygon, circle, ellipse и inset; inset предназначен для прямоугольников.

2. на SVG

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

• через указатель на встроенный SVG (то есть разметка SVG существует в самой странице);
• со ссылкой на внешний документ SVG.

В обоих случаях в SVG используется элемент clipPath для обёртывания элемента, который определяет обтравочный контур, будь то круг, многоугольник или другой элемент. Сравните демонстрационную версию ниже в Firefox и в браузере WebKit или Blink, таком как Chrome, чтобы определить различия. Квадратные изображения подразумевают отсутствие поддержки браузера.

Третье изображение не отображается в Safari. Несмотря на обширную отладку, мне не удалось решить эту проблему. Я была бы признательна за примечание в разделе комментариев, если вы столкнетесь с решением.

See the Pen Clip-path: Browser support by webref (@webref) on CodePen.

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

на CSS: Firefox 54+, Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Android 4.4+, Opera Mobile 24+

Обратите внимание, что для всех поддерживаемых браузеров в настоящее время требуется префикс -webkit. (Кроме Firefox — прим

переводчика).

на SVG: все перечисленные выше браузеры и Firefox 3.5+.

Свойство clip-path ещё не поддерживается в Internet Explorer, но в настоящее время разрабатывается как часть «Masking Module».

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

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

Преимущества CSS

• Ясный синтаксис лёгок для понимания из-за относительной простоты базовых фигур.
• Адаптивность легко получается через относительные единицы, такие как проценты.

Преимущества SVG

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

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

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

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

Плюсы

Браузеры, которые не поддерживают свойство clip-path, будут его игнорировать

Если вы используете свойство осторожно, пользователи с неподдерживаемыми браузерами ничего не заподозрят! После создания обтравочного контура спецификация заявляет, что события указателя не должны отправляться за пределы области отсечения (что идеально). Таким образом, события щелчка . Вы можете использовать проценты или любую единицу длины, например пиксели или em, для определения координат базовых фигур с помощью CSS

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

Минусы

• Все границы, тени и контуры . Вы не можете добавить границу и ожидать её соблюдения. Ниже мы рассмотрим некоторые альтернативы.
• Спецификация ещё не достигла стадии «Рекомендация», поэтому всегда есть шанс, что синтаксис поменяется.
• Сообщается о нескольких ошибках с clip-path и трёхмерными трансформациями, переходами и прозрачностью, которые описаны ниже. Помните об этом и избегайте комбинирования свойств, которые порождают такие ошибки.

Синтаксис

Свойство  определяется как одно или комбинация значений перечисленных ниже.

Значения

Представляет URL ссылку на траекторию, ограничивающую элемент.

, , ,

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

Использует границы объекта в качестве базовой области.

Использует stroke bounding box в качестве базовой области.

Использует ближайший SVG viewport в качестве базового блока. Если отриут  определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом  и ширина и высота базового блока устанавливаются равными значениям атрибута .​​​​​​​

Использует margin box в качестве базового блока.

Использует border box в качестве базового блока.

Использует padding box в качестве базового блока.

Использует content box в качестве базового блока.

Обрезанная область не создается.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Official Syntax

• Syntax:

  clip-path: <clip-source> |  | none
  
  /* where */
  <clip-source> = <url> /* URL references an SVG <clipPath> element  */
  
  /* and */
  <geometry-box> = <shape-box> | fill | stroke | view-box
  

• Initial: none
• Applies To: All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements
• Animatable: See

Notes

The is a shape created using the basic shape functions. See the entry for details.

The can be either a or one of the three keywords: , , .

The defines the reference box for the s created using the shape functions. It can be one of the following values: , , , . These boxes are applied and can be used on HTML elements.

The other three geometry box values are applied to SVG elements. SVG elements don’t have a box model, and so the values will have no effect on them. As a matter of fact, the values will resolve to the value .

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Пример 2: Анимация базовых фигур через transition

Наведите курсор на фиолетовый шестиугольник и он превратится в восьмиугольник. Однако заданного эффекта перехода не произойдёт.

See the Pen Clip-path: shape transition: Part 1 by webref (@webref) on CodePen.

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

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

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

А это описание шестиугольника с восемью парами координат, первые две из которых были дублированы:

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

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

Имейте в виду, что некоторые люди и уделяют особое внимание внедрению Web Animations API, который, к сожалению, находится на стадии рабочего проекта. В демонстрации ниже (фоновое изображение предоставлено morgueFile), вы можете видеть, как мы анимировали точки многоугольника между событиями mouseover и mouseout в течение 0,2 секунд

Присмотритесь к тегу в разметке SVG

В демонстрации ниже (фоновое изображение предоставлено morgueFile), вы можете видеть, как мы анимировали точки многоугольника между событиями mouseover и mouseout в течение 0,2 секунд. Присмотритесь к тегу <animate> в разметке SVG.

See the Pen Clip-path: shape transition: Part 2 by Karen Menezes (@imohkay) on CodePen.

语法

/* Keyword values */
clip-path: none;

/* <clip-source> values */ 
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

clip-path属性指定为下面列出的值的一个或多个值的组合.

取值

用 表示剪切元素的路径

一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框

如果同 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 定义的剪切路径）。几何框盒可以有以下的值中的一个：

使用 margin box 作为引用框。

使用 border box 作为引用框。

使用 padding box 作为引用框。

使用 content box 作为引用框。

利用对象边界框作为引用框。

使用笔触边界框（stroke bounding box）作为引用框

使用最近的 SVG 视口（viewport）作为引用框。如果 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 属性建立的坐标系的原点，引用框的尺寸用来设置 属性的宽高值。

不创建的剪切路径。

Note: A computed value other than  results in the creation of a new stacking context the same way that CSS does for values other than .

Финал: оживляем текст

Что­бы доба­вить огня, исполь­зу­ем зна­ко­мый нам по JavaScript цикл @for. Его нет в стан­дарт­ном CSS, но мы же исполь­зу­ем пре­про­цес­со­ры, поэто­му не будем себя огра­ни­чи­вать.

Нам пона­до­бит­ся коман­да @keyframes — она отве­ча­ет в CSS за рас­кад­ров­ку ани­ма­ции. Про­ще гово­ря, если мы зада­дим кад­ры с пара­мет­ра­ми 0%, 50% и 100%, то у нас в нача­ле, сере­дине и кон­це ани­ма­ции могут быть раз­ные кар­тин­ки.

Зада­ча такая: нуж­но сде­лать ани­ма­цию из 20 кад­ров для каж­до­го эле­мен­та, что­бы любой кадр немно­го отли­чал­ся от осталь­ных. Это даст тот самый рва­ный и непред­ска­зу­е­мый эффект, кото­рый нам нужен. Для это­го мы в цик­ле про­го­ним пере­мен­ную i от 0 до 20, что­бы полу­чил­ся 21 кадр, и каж­дый кадр отри­су­ем в пря­мо­уголь­ни­ке со слу­чай­ны­ми началь­ны­ми коор­ди­на­та­ми, что­бы уси­лить эффект:

Что тут про­ис­хо­дит:

1. Мы зада­ли отдель­ную рас­кад­ров­ку для каж­до­го из двух псев­до­эле­мен­тов.
2. Ани­ма­ция каж­до­го тако­го эле­мен­та будет состо­ять из 21 кад­ра (20 + нуле­вой началь­ный).
3. В цик­ле @for мы зада­ём рас­кад­ров­ку с шагом в 5% (1/20).
4. На каж­дом про­хо­де цик­ла рису­ем вир­ту­аль­ный пря­мо­уголь­ник со слу­чай­ны­ми коор­ди­на­та­ми по высо­те. Этот пря­мо­уголь­ник как бы «обре­за­ет» про­глю­чив­шую над­пись (от англий­ско­го clip), то есть глюч­ная вер­сия над­пи­си про­ры­ва­ет­ся кус­ка­ми.
5. Зна­че­ние в 780 пик­се­лей нуж­но для того, что­бы эффект заце­пил всю над­пись. Если будет мень­ше, то послед­ние сим­во­лы оста­нут­ся без эффек­тов.

Сконвертированный CSS-код, который можно добавить на страницу

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

示例

HTML

<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>

CSS

p {
  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0,0,0,.2);
}

С этим читают

• :first-child
• Background-color
• Position (absolute, relative и fixed)
• Стилизация select
• Png to svg
• Атрибут width
• Parseint()
• Background-size
• Width
• Css свойство text-shadow