clip-path — CSS | MDN

Experimental

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

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

Историческая справка: Свойство clip-path заменило устаревшее свойство clip (en-US) .

clip-path: none;


clip-path: url(resources.svg#c1);


clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;


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: padding-box circle(50px at 0 100px);


clip-path: inherit;
clip-path: initial;
clip-path: unset;
 

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

Значения

url()

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

inset(), circle(), ellipse(), polygon()

Функция <basic-shape>

(en-US). Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.

<geometry-box>

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

fill-box

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

stroke-box

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

view-box

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

margin-box

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

border-box

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

padding-box

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

content-box

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

none

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

Формальный синтаксис.

.target {
  clip-path: url(#c1);
}


.anothertarget {
  clip-path: url(resources.svg#c1);
}


.circleClass {
  clip-path: circle(15px at 20px 20px);
}

HTML

<img src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg>
  <defs>
    <clipPath>
      <rect y="110" x="137"/>
      <rect x="0" y="110"/>
      <rect x="137" y="0"/>
      <rect x="0" y="0"/>
    </clipPath>
  </defs>
</svg>

<select>
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
</select>
 

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

Результат

BCD tables only load in the browser

Свойство clip | CSS справочник

CSS свойства

Определение и применение

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

Свойство clip не работает с элементами у которых значение свойства overflow равно visible.

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

CSS синтаксис:

clip:"auto | shape | initial | inherit";

JavaScript синтаксис:

object.style.clip = "rect(50px,50px,50px,50px)"

Значения свойства

Значение	Описание
auto	Обрезка не применяется к элементу. Это значение по умолчанию.
shape	Обрезает элемент. Единственное допустимое значение: rect (Top, Right, Bottom, Left).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Для запоминания порядка указания значений при обрезке, можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L — left).

<!DOCTYPE html>
<html>
<head>
<title>Свойство float.</title>
<style> 
.test {
position : absolute; /* задаём абсолютное позиционирование элемента.*/
clip : rect(75px,200px,250px,60px); /* задаём обрезку элемента; порядок расстановки отступов будет следующий: Top(75px) - Right(200px) -  Bottom(250px) - Left(60px). */
}
.test1 {
position : absolute; /* задаём абсолютное позиционирование элемента.*/
clip : rect(75px,200px,200px,60px); /* задаём обрезку элемента; порядок расстановки отступов будет следующий: Top(75px) - Right(200px) - Bottom(200px) - Left(60px). */
margin-left : 175px; /* указываем внешний отступ для смещения изображения */
}
.test2 {
position : absolute; /* задаём абсолютное позиционирование элемента. */
clip : rect(125px,225px,250px,5px); /* задаём обрезку элемента; порядок расстановки отступов будет следующий: Top(125px) - Right(2250px) - Bottom(250px) - Left(5px).   */
margin-left : 425px; /* указываем внешний отступ для смещения изображения */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "test">
		<img src = "nich.jpg" alt = "nich" class = "test1">
		<img src = "nich.jpg" alt = "nich" class = "test2">
	</body>
</html>

Пример использования свойства clip.CSS свойства

clip | CSS справочник

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

12.0+	8.0+	1.0+	1.0+	7.0+	1.0+

Описание

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

Свойство clip не работает с элементами, для которых свойство overflow задано со значением visible.

Значение по умолчанию:	auto
Применяется:	к абсолютно позиционированным элементам
Анимируется:	да
Наследуется:	нет
Версия:	CSS2
Синтаксис JavaScript:	object.style.clip=»rect(0px,50px,50px,0px)»

Синтаксис

clip: auto|форма|inherit;

Значения свойства

Значение	Описание
форма	Обрезает элемент. Единственное корректное значение: rect (верх, право, низ, лево)
auto	Обрезка не будет применяться.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

clip:

auto

rect(0px,25px,25px,0px)

rect(0px,50px,50px,0px)

rect(10px,50px,50px,10px)

rect(10px,100px,50px,10px)

rect(10px,100px,100px,10px)

rect(0px,100px,100px,0px)

Измените значение для просмотра результата.

div#myBox {
position: absolute;
background-color: yellow;
width: 100px;
clip: auto;
}

CSS свойство clip | Как создать сайт

CSS справочник

Определение и применение

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

Свойство clip не работает с элементами у которых значение свойства overflow равно visible.

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

CSS синтаксис:

clip:"auto | shape | initial | inherit";

JavaScript синтаксис:

object.style.clip = "rect(50px,50px,50px,50px)"

Значения свойства

Значение	Описание
auto	Обрезка не применяется к элементу. Это значение по умолчанию.
shape	Обрезает элемент. Единственное допустимое значение: rect (Top, Right, Bottom, Left).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Для запоминания порядка указания значений при обрезке, можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L — left).

<!DOCTYPE html>
<html>
<head>
<title>Свойство float.</title>
<style> 
.test {
position : absolute; /* задаём абсолютное позиционирование элемента.*/
clip : rect(75px,200px,250px,60px); /* задаём обрезку элемента; порядок расстановки 
отступов будет следующий: Top(75px) - Right(200px) - Bottom(250px) - Left(60px). */
}
.test1 {
position : absolute; /* задаём абсолютное позиционирование элемента.*/
clip : rect(75px,200px,200px,60px); /* задаём обрезку элемента; порядок расстановки 
отступов будет следующий: Top(75px) - Right(200px) - Bottom(200px) - Left(60px). */
margin-left : 175px; /* указываем внешний отступ для смещения изображения */
}
.test2 {
position : absolute; /* задаём абсолютное позиционирование элемента. */
clip : rect(125px,225px,250px,5px); /* задаём обрезку элемента; порядок расстановки 
отступов будет следующий: Top(125px) - Right(2250px) - Bottom(250px) - Left(5px). */
margin-left : 425px; /* указываем внешний отступ для смещения изображения */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "test">
		<img src = "nich.jpg" alt = "nich" class = "test1">
		<img src = "nich.jpg" alt = "nich" class = "test2">
	</body>
</html>

Пример использования свойства clip.

 

CSS справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Эксперименты с background-clip: text

С помощью свойства CSS «background-clip: text» (которое в настоящее время поддерживается только в браузерах Webkit), мы можем добавить фоновое изображение для текстового элемента. Сегодня мы будем экспериментировать с ним и создадим несколько симпатичных примеров, добавив CSS3 переходы.

Изображения из примеров от Andreas Preis и Joanna Kustra.

HTML-разметка

Структура будет очень простая — заголовок h4 внутри обертки:

<div>
 <h4>Andreas</h4>
</div>

Мы будем использовать класс «it-animate» в обертке при помощи JQuery, чтобы показать переходы.

Пример 1

В первом примере мы добавим два фоновых изображения. Изначально мы хотим чтобы изображения занимали всё слово, поэтому мы установим размер фона 100%. Так как мы задаем только одно значение, то второе значение, то есть вертикальное «растяжение», будет создаваться автоматически. Это означает, что изображение будет сохранять соотношение сторон при вставке в элемент h4.

При использовании фонового изображения и настройке background-clip: “text”, мы должны убедиться, что цвет текста либо прозрачный или полупрозрачный, с тем чтобы иметь возможность видеть изображение. Мы будем использовать свойство rgba, которое позволяет нам установить прозрачность.

Мы также добавим полупрозрачный белый text-stroke (-webkit-text-stroke), чтобы изображение просвечивалось.

Начальное положение фонового изображения будет по центру.

.it-wrapper h4{
 font-size: 320px;
 line-height: 188px;
 padding: 60px 30px 30px;
 color: rgba(67, 201, 117, 0.9);
 font-family: ‘BebasNeueRegular’, Arial, sans-serif;
 text-shadow: 10px 10px 2px rgba(0,0,0,0.2);
 
 -webkit-text-stroke: 10px rgba(255,255,255,0.6);
 
 background-color: #fff;
 background-repeat: no-repeat;
 background-image: url(../images/2.jpg), url(../images/1.jpg);
 background-position: 50% 50%;
 background-size: 100%;
 
 -webkit-background-clip: text;
 /* на тот случай когда это свойство начнет поддерживаться Firefox */
 -moz-background-clip: text;
 background-clip: text;
 
 transition: all 0. 5s linear;
 
 /* добавим некоторые свойства для Firefox */
 -moz-border-radius: 30px;
 -moz-box-shadow: 0px 0px 1px 8px rgba(67, 201, 117, 0.2);
}

Для Firefox мы хотим добавить некоторый запасной вариант. Хотя background-clip для текста не будет работать, мы все же можем сделать анимацию для фонового изображения.

Итак, мы оставим фоновое изображение, но добавим border-radius и box-shadow только для Firefox .

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

.it-wrapper h4.it-animate{
 background-size: 50%;
 background-position: 0% 50%, 130% 50%;
 color: rgba(242, 208, 20, 0.4);
 
 -moz-box-shadow: 0px 0px 1px 8px rgba(242, 208, 20, 0.4);
}

Размер фона для изображения будет уменьшен до 50%, и мы будем менять положение фона для перемещения одного изображения влево, а другого — вправо. Мы также изменим цвет.

Для Firefox мы изменим цвет тени.

Пример 2

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

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

Если вы хотите легко создавать свои собственные градиенты, вы можете использовать  Ultimate CSS Gradient Generator. Это действительно прекрасный инструмент и вы можете выбрать различные форматы цвета и легко создавать собственные градиенты. Если вы используете Photoshop, Вы сразу поймете, как использовать его.

Размер фона для обоих градиентов будет в три раза больше размера нашего слова в длину и равный 100% в высоту.

.it-wrapper h4{
 font-size: 270px;
 line-height: 180px;
 padding: 30px 30px 40px;
 color: rgba(255,255,255,0.1);
 font-family: ‘Fascinate’, ‘Arial Narrow’, Arial, sans-serif;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
 
 background:
 linear-gradient(
 left,
 rgba(105,94,127,0. 54) 0%,
 rgba(255,92,92,0.57) 15%,
 rgba(255,160,17,0.59) 27%,
 rgba(252,236,93,0.61) 37%,
 rgba(255,229,145,0.63) 46%,
 rgba(111,196,173,0.65) 58%,
 rgba(106,132,186,0.67) 69%,
 rgba(209,119,195,0.69) 79%,
 rgba(216,213,125,0.7) 89%,
 rgba(216,213,125,0.72) 100%
 ),
 repeating-linear-gradient(
 -45deg,
 rgba(255,255,255,0.5),
 transparent 20px,
 rgba(255,255,255,0.3) 40px
 );
 
 background-size: 300% 100%;
 background-position: center left, top left;
 
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;
 
 transition: all 1.8s linear;
 
 -moz-border-radius: 90px 15px;
 -moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4);
}

Для Firefox мы опять добавим border-radius и box-shadow.

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

.it-wrapper h4.it-animate{
 background-position: center right, top right;
 color: rgba(39,137,149,0.5);
 
 -moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);
}

Для Firefox мы будем анимировать цвет box shadow в соответствии с цветом текста.

Пример 3

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

.it-wrapper h4{
 font-size: 180px;
 line-height: 180px;
 padding: 20px 30px;
 color: rgba(0,80,81,0.7);
 -webkit-text-stroke: 2px rgba(0,0,0,0.5);
 font-family: ‘Gravitas One’, ‘Arial Narrow’, Arial, sans-serif;
 text-shadow: 15px 15px 1px rgba(255,255,255,0.3);
 
 background-image: url(../images/3.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 400%;
 
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;
 
 transition: all 0. 3s linear;
 
 -moz-box-shadow:
 -10px -10px 0px rgba(255,255,255,0.4),
 10px 10px 0px rgba(0,81,81,0.4),
 0px 0px 50px 50px rgba(255,255,255,0.9) inset;
}

Кроме размера фона, мы также изменим значение прозрачности rgba, и добавим тень для Firefox:

.it-wrapper h4.it-animate{
 background-size: 100%;
 color: rgba(0,80,81,0.1);
 -moz-box-shadow:
 -20px -20px 0px rgba(255,255,255,0.4),
 20px 20px 0px rgba(0,81,81,0.4),
 0px 0px 40px 0px rgba(255,255,255,0.4) inset ;
}

И вот и всё! Надеюсь, вам понравился этот эксперимент! Примеры смотрите в Chrome или Safari.

Скачать исходники

Перевод статьи с tympanus.net/codrops

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

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : clip — Справочник Web-языков

Материал из Справочник Web-языков

Атрибут clip | Свойство clip

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

Синтаксис

HTML	{ clip : sClip }
Скрипты	[ sClip = ] object.style.clip

Используемые значения

sClip

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

auto Значение по умолчанию. Видима вся область объекта. rect (top, right, bottom, left) Top, right, bottom и left определяют значения длины, каждое из которых может быть заменено на auto, соответствующие областям отсечения. Значение top показывает, что все, что выше этого значения по оси Y (значение 0 в верхней точке), будет отрезано. Значение right показывает, что все, что правее этого значения по оси X (значение 0 в самой левой точке), будет отрезано. Значение left показывает, что все, что левее этого значения по оси X (значение 0 в самой левой точке), будет отрезано. Значение bottom показывает, что все, что ниже этого значения по оси Y (значение 0 в верхней точке), будет отрезано.

Это свойство читается/записывается для всех объектов. Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

В Internet Explorer 8.0 синтаксис для свойства clip идентичен тому, который описан в спецификации Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1). Поэтому параметры должны быть перечислены через запятые для значения rect.

В Internet Explorer 7.0 и более ранних версиях запятые можно опустить. Например,

clip:rect(0 50 50 0)

.

Это свойство форму и размер видимой части позиционированного объекта. Свойству position должно быть задано значение absolute. Любая часть объекта, находящаяся не в видимой области, становится прозрачной (transparent). Любое значение для координат может быть заменено на auto, чтобы сделать видимой соответствующую сторону объекта (фактически, это означает, что сторона не будет обрезана).

Если задать значения в таком порядке: clip:rect(0, 0, 50, 50), то объект будет невидимым, потому что верхнее и правое значения установлены в ноль. Чтобы добиться отображения объекта в режиме 50-на-50, надо задать clip:rect(0, 50, 50, 0).

Свойство clip и атрибут clip доступны на платформе Macintosh, начиная Internet Explorer 5.0

Примеры

В первом примере используется атрибут clip для задания парметров отображения объекта.

<HTML>
<BODY>
<DIV>
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV>
<IMG SRC="sphere. jpg"/>
</DIV>
<DIV>
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV>
<IMG SRC="sphere.jpg"/>
</DIV>
</BODY>
</HTML> 

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

<IMG SRC="sphere.jpg" 
   >

<BUTTON 
   >
    Обрезать рисунок</BUTTON>

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0, 3.5

Браузер Opera 7.0 фон и рамку элемента оставляет прежними, а скрывает только содержимое элемента.

Ссылки на источники

https://msdn.microsoft.com/en-us/library/ms530748(VS.85).aspx

https://developer.mozilla.org/en/CSS/clip

Представляем CSS-свойство clip-path — CoderLessons.com

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

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

Основы

Отсечение — это когда мы обрезаем кусок чего-то В нашем случае это операция, которая позволяет нам полностью или частично скрывать элементы на веб-странице. Две другие концепции, которые относятся к отсечению, которые мы будем использовать в этой статье, это обтравочный контур и отсечения регион .

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

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

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

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

Синтаксис и использование

Правильный синтаксис для использования этого свойства:

 clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none 

Синтаксические значения выше включают в себя:

• clip-source будет URL, ссылающийся на внутренний или внешний элемент SVG <clipPath> .
• basic-shape принимает базовую функцию shape, определенную в спецификации CSS Shapes .
• geometry-box является обязательным. Когда вы предоставляете его вместе с функцией basic-shape , он действует как справочное окно для отсечения, выполняемого basic-shape . Если geometry-box указан сам по себе, тогда он использует форму указанного блока, включая любое формирование угла (предоставляемое свойством border-radius ) в качестве пути отсечения. Мы рассмотрим это в ближайшее время.

Теперь рассмотрим следующий код CSS, который использует базовую функцию shape:

 img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } 

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

Первая координата каждой точки определяет ее местоположение на оси X. Точно так же вторая точка указывает свое местоположение на оси Y. Все точки нанесены по часовой стрелке. Рассмотрим крайнюю правую точку нашего ромба. Он расположен на полпути вниз по оси Y, поэтому его координата Y составляет 50%. Он также расположен в крайнем правом положении на оси x, поэтому его координата x равна 100%. Значения всех остальных точек можно вывести аналогично.

Элементы отсечения со значениями

geometry-box

Когда вы обрезаете HTML-элемент, geometry-box (или блок ссылок) может быть одним из следующих: margin-box , margin-box border-box padding-box или padding-box content-box . Значение geometry-box следует использовать следующим образом:

 .clip-me { clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box; margin: 10%; } 

В приведенном выше случае поле для margin-box нашего элемента будет использоваться в качестве ссылки для определения точного местоположения точек отсечения. Точка (10%, 10%) — это верхний левый угол нашего margin-box и, таким образом, наш clip-path будет расположен относительно этой точки.

В случае SVG-элементов это могут быть fill-box , stroke-box и stroke-box view-box . Поле view-box значения будет использовать ближайший видовой экран SVG в качестве справочного окна, если поле view-box не указано.

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

clip-path

Это свойство имеет много интересных применений. Во-первых, это может улучшить наш текстовый контент. Посмотрите на изображение ниже. Фон за заголовком и вторым абзацем был создан с использованием свойства clip-path :

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

 .p-msg { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%); } 

Фон имеет семь вершин, и это отражено в пути clip-path нашего многоугольника. Как я нашел эти координаты, которые вы спрашиваете? Я оставлю это читателю, чтобы выяснить — это поможет вам лучше понять концепции. Поиграйте с CodePen ниже, чтобы освоить его:

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

 .right { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position: relative; top: -352px; left: 256px; } 

Вот пример изображений clip-path в действии:

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

Добавление анимации

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

 @keyframes polygons { 25% { clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%); } 50% { clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%); } 70% { clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%); } } 

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

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

Это свойство не поддерживается IE и Edge. Firefox поддерживает только clip-path частично (он поддерживает только синтаксис url() ) . Однако начиная с версии 47 Firefox поддерживает это свойство с layout.css.clip-path-shapes.enabled флагом layout.css.clip-path-shapes.enabled .

Для правильной работы Chrome, Safari и Opera требуется префикс -webkit- . К сожалению, даже они не поддерживают фигуры во внешних SVG. Подробнее о поддержке браузера вы можете прочитать в разделе « Могу ли я использовать» .

Вывод

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

Я также хотел бы упомянуть два инструмента — clippy от Bennett Feely и генератор путей обрезки от CSS Plant — чтобы вам было проще создавать сложные многоугольные пути.

Вы создали что-то удивительное с помощью clip-path? Пожалуйста, предоставьте ссылку на это в комментариях.

clip — CSS: Каскадные таблицы стилей

Свойство CSS clip определяет видимую часть элемента. Свойство clip применяется только к абсолютно позиционированным элементам, то есть элементам с position: absolute или position: fixed .

 
клипса: авто;


клип: rect (1px, 10em, 3rem, 2ch);


клип: наследование;
клип: начальный;
клип: не установлен;  

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

Значения

< ()>

Прямоугольник < ()> формы rect (, , , ) . Значения <верх> и <нижний> представляют собой смещения от внутренней верхней границы границы прямоугольника, в то время как <правый> и <левый> представляют собой смещения от внутренней левой границы границы окна. поле — то есть размер поля заполнения.

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

авто

Элемент не обрезается (по умолчанию). Это отличается от rect (auto, auto, auto, auto) , которое закрепляется на внутренних границах элемента.

Начальное значение	auto
Применимо к	абсолютно позиционированным элементам
Унаследовано	нет
Расчетное значение	auto , если указано как auto , в противном случае прямоугольник с четырьмя значениями, каждое из которых равно авто , если указано как авто или вычисленная длина в противном случае
Тип анимации	прямоугольник

  | auto 
, где 
   = rect (, , , )  
 

Обрезка изображения

CSS

 . dotted-border {
  граница: пунктирная;
  положение: относительное;
  ширина: 536 пикселей;
  высота: 350 пикселей;
}

#верхний левый,
#середина,
#Нижний правый {
  позиция: абсолютная;
  верх: 0;
}

#верхний левый {
  слева: 360 пикселей;
  клип: rect (0, 175 пикселей, 113 пикселей, 0);
}

#середина {
  слева: 280 пикселей;
  клип: rect (119 пикселей, 255 пикселей, 229 пикселей, 80 пикселей);
}

#Нижний правый {
  слева: 200 пикселей;
  клип: rect (235 пикселей, 335 пикселей, 345 пикселей, 160 пикселей);
}  

HTML

Результат

таблиц BCD загружаются только в браузере

clip-path: замечательное свойство CSS, которое вы должны использовать | Аашиш Манандхар

Привет, друг! Вы, должно быть, слышали о свойстве clip-path в css.Нет? Тогда вас ждет угощение. Если да, то согласны ли вы, что это довольно круто, и я предполагаю, что вы попали сюда, задаваясь вопросом, где вы можете использовать его в своем приложении. Здесь я приведу несколько вариантов использования с примерами, которые помогут вам начать использовать свойство clip-path в вашем приложении, а с остальным вы легко разберетесь.

Свойство clip-path CSS создает область отсечения, которая устанавливает, какая часть элемента должна отображаться. Части, находящиеся внутри области, отображаются, а те, что снаружи, скрыты.

По определению, вы, должно быть, задаетесь вопросом, он должен использоваться для обрезки изображений. Да, вы определенно могли бы обрезать изображения, используя свойство clip-path, и я думаю, что, скорее всего, люди использовали его как альтернативу использованию свойства border-radius для создания таких круглых изображений в аватарах.

Но вы могли бы сделать гораздо больше!

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

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

Следовательно, его можно использовать как альтернативу свойству translate. Другой способ анимации в HTML, не так ли?

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

Просто добавьте переход свойства clip-path со значением круга, изменяющимся от 0% до 100% при наведении курсора, и вы можете легко добиться этого, не беспокоясь.

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

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

В CSS есть множество свойств, о которых мы можем не знать, и это всего лишь мой взгляд на то, как мы могли бы использовать одно из них.
Надеюсь, это помогло вам подумать о других способах использования свойства clip-path в вашем приложении или о том, как вы могли бы интегрировать в него один из моих примеров.
На этом все, ребята. Продолжай мечтать! 🙂

Свойство CSS: clip

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

<верх> , <справа> , <нижний> и <левый> могут иметь значение <длина> или авто . Допускается отрицательная длина. Значение auto означает, что заданный край области отсечения будет таким же, как край сгенерированного блока границы элемента (т.е.е., авто означает то же, что и 0 для <верх> и <лево> (в тексте слева направо, <справа> в тексте справа налево), то же как вычисленное значение высоты плюс сумма вертикального заполнения и ширины границы для , и то же самое, что вычисленное значение ширины плюс сумма горизонтального заполнения и ширины границы для ( в тексте с направлением слева направо, <слева> в тексте с направлением справа налево), так что четыре значения auto приводят к тому, что область обрезки совпадает с рамкой элемента).

Когда координаты округляются до пиксельных координат, следует позаботиться о том, чтобы пиксели не оставались видимыми, когда <левый> и имеют одинаковое значение (или <верх> и <нижний> имеют одинаковое значение value), и, наоборот, никакие пиксели в рамке элемента не остаются скрытыми, если эти значения равны auto .

клипов · WebPlatform Docs

Сводка

Устарело; см. clip-path.

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

Обзорная таблица

Начальное значение
:

Относится к

Все элементы

Унаследовано

Нет

Медиа

визуальный

Расчетное значение
:

Анимационный

Нет

Свойство объектной модели CSS
:

Синтаксис

• зажим: авто
• зажим: прямоугольный (вверху, справа, внизу, слева)

Значения

авто

По умолчанию.Обрезать, чтобы показать весь объект.

прямоугольник (вверху, справа, внизу, слева)

Сверху, справа, снизу и слева задаются значения длины, любое из которых может быть заменено на auto , оставляя эту сторону необрезанной. Значение top указывает, что все, что выше этого значения по оси Y (с 0 вверху), обрезается. Значение right указывает, что все, что выше этого значения по оси X (с 0 слева), обрезается. Значение bottom указывает, что все, что ниже этого значения по оси Y (с 0 вверху), обрезается.Значение left указывает, что все слева от этого значения по оси X (с 0 слева) обрезается.

Примеры

В этом примере логотип Web Platform Docs обрезается двумя способами: в одном отображается значок, а в другом — текст.

  img.clippable {
  
  позиция: абсолютная;
  верх: 100 пикселей;
}

img.clipped-icon {
  слева: 215 пикселей;
  
  клип: rect (10px, 68px, 63px, 3px);
}

img.clipped-text {
  слева: 300 пикселей;
  
  клип: rect (10 пикселей, 190 пикселей, 63 пикселей, 53 пикселей);
}
  

Посмотреть живой пример

HTML-код для приведенного выше примера.

Банкноты

Замечания

Начиная с Windows Internet Explorer 8, требуемый синтаксис атрибута clip идентичен синтаксису, указанному в каскадных таблицах стилей, уровень 2, редакция 1 (CSS2.1) спецификация; то есть теперь требуются запятые между параметрами значения rect () . Для этого требуется, чтобы Windows Internet Explorer находился в режиме стандартов IE8 (или в режиме EmulateIE8 с директивой Internet Explorer 8! DOCTYPE). Дополнительные сведения о режимах совместимости документов см. В разделе «Определение совместимости документов». В Windows Internet Explorer 7 и более ранних версиях (а также в Internet Explorer 8 или более поздних версиях в стандартном режиме IE7, режиме EmulateIE7 или IE5 (Quirks)) запятые следует опускать.Например: clip : rect (0 50 50 0) Требуемый синтаксис атрибута clip идентичен синтаксису, указанному в спецификации CSS2.1; то есть теперь требуются запятые между параметрами значения rect () . Это свойство определяет форму и размер видимого позиционированного объекта. Позиция должна быть установлена ​​на абсолютно . Любая часть объекта, выходящая за пределы области отсечения, прозрачна. Любую координату можно заменить значением auto , которое показывает соответствующую сторону (то есть сторона не обрезана).Порядок значений clip : rect (0, 0, 50, 50) делает объект невидимым, потому что он устанавливает верхнее и правое положение области отсечения равным 0. Для достижения окна просмотра 50 на 50 используйте зажим : rect (0, 50, 50, 0) . Атрибут clip и свойство clip доступны на платформе Macintosh, начиная с Microsoft Internet Explorer 5.

Синтаксис

зажим: авто | прямоугольник (сверху, справа, снизу, слева)

См. Также

Статьи по теме

Визуальные эффекты

Связанные страницы

Атрибуции

Создание миниатюр с использованием свойства CSS Clip

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

В настоящее время вырезки предлагаются только в форме прямоугольника, но в будущем могут поддерживаться и другие формы.Вы можете создать отсечение прямоугольника, используя форму прямоугольник . Для использования rect требуются четыре координаты Top, Right, Bottom, Left (TRBL). Давайте подробнее рассмотрим, как clip вычисляет область отсечения, поскольку это может вызвать некоторую путаницу. Имейте в виду, что нижняя часть начинается сверху, а правая — слева.

Давайте посмотрим на следующий пример.

Пример

Вот пример изображения, которое мы хотим вырезать:

CSS и HTML выглядят так:

 
  
.clipwrapper {
 
 позиция: относительная; 
 
 высота: 225 пикселей; 
 
} 
 
 .clip {
 
 положение: абсолютное; 
 
 клип: прямоугольник (50 пикселей, 218 пикселей, 155 пикселей, 82 пикселей); 
 
} 
  

ПРИМЕЧАНИЕ. Рекомендация W3C предлагает использовать запятые между координатами, однако в Internet Explorer это не работает.Как ни странно, использование запятых в IE не работает в режиме совместимости со стандартами, но работает в режиме причуд. Чтобы решить эту проблему, я не использую запятые, которые, похоже, работают во всех браузерах, включая FireFox.

, и результат будет выглядеть так:

Наш класс (.clip) устанавливает область отсечения, используя синтаксис вращения TRBL. Я использую длину в пикселях, но вы также можете попробовать здесь другую длину или процентное соотношение, и они могут быть положительными или отрицательными. Вы также можете использовать auto , чтобы пропустить обрезку этого конкретного края.Вы также можете попробовать вложенные клипы. Еще одна важная вещь, на которую следует обратить внимание, — это то, что для работы свойства clip необходимо установить абсолютную позицию класса отсечения. Здесь я использовал относительно расположенную обертку div, чтобы сохранить наше изображение там, где мы хотим. Также указание высоты контейнера div предотвращает перекрытие следующей строки с обрезанными областями.

Удаление обрезанных областей

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

 
  
 .clipout {
 
 position: relative; 
 
 ширина: 136 пикселей; 
 
 высота: 105 пикселей; 
 
} 
 
 .clipin {
 
 положение: абсолютное; 
 
 клип: прямоугольник (50 пикселей, 218 пикселей, 155 пикселей, 82 пикселей); 
 
 верх: -50 пикселей; 
 
 слева: -82px; 
 
} 
  

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

Добавить немного тени

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

 
  
 .clipout {
 
 положение: относительное; 
 
 ширина: 136 пикселей; 
 
 высота: 105 пикселей; 
 
 верх: -1px; 
 
 слева: -1px; 
 
} 
 
.clipin {
 
 позиция: абсолютная; 
 
 клип: прямоугольник (50 пикселей, 218 пикселей, 155 пикселей, 82 пикселей); 
 
 верх: -50 пикселей; 
 
 слева: -82px; 
 
} 
 
 .shade1 {
 
 width: 136px; 
 
 высота: 105 пикселей; 
 
 цвет фона: # e8e8e8; 
 
} 
 
 .shade2 {
 
 позиция: относительная; 
 
 ширина: 136 пикселей; 
 
 высота: 105 пикселей; 
 
 цвет фона: #cbcbcb; 
 
 верх: -2 пикселя; 
 
 слева: -2 пикселя; 
 
} 
 
.shade3 {
 
 позиция: относительная; 
 
 ширина: 136 пикселей; 
 
 высота: 105 пикселей; 
 
 цвет фона: # a0a0a0; 
 
 верх: -1px; 
 
 слева: -1px; 
 
} 
  

и вот результат:

Woot!

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

Отсечение, маскирование и другие отличные свойства CSS

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

Как это работает?

Мы используем собственный код CSS, чтобы предоставить функции, которые еще не поддерживаются Webflow. Пользовательский код может быть размещен на многих уровнях в проекте Webflow: на уровне сайта (на вкладке «Пользовательский код» в настройках сайта), на уровне страницы (в настройках страницы) или внутри самой страницы с помощью компонента пользовательского кода.

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

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

В фиолетовом поле примерно показана HTML-структура демонстрации.

Сцена по умолчанию

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

УБИЙСТВО

ИЗ
КИТАЙСКОГО БУКИ

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

Обрезка фонового текста

Редактировать октябрь 2018 г .: из-за ошибки в Chrome 69 этот метод теперь использует изображение bg и свойство отсечения на текстовый элемент. Обычно их можно установить на родительском элементе, что обеспечивает большую гибкость.

Свойство обрезки и фоновое изображение устанавливаются на текст.

KILLING

OF A
CHINESE BOOKIE

.clipped {
-webkit-text-fill-color: transparent;
background-clip: text;}

Обрезка фонового текста с фиксированным фоновым изображением

Edit oct 2018: из-за ошибки в Chrome 69 теперь используется этот метод изображение bg и свойство обрезки текстового элемента.Обычно их можно установить на родителя, что дает большую гибкость.

Для текста устанавливается свойство обрезки и фоновое изображение.

KILLING

OF A
CHINESE BOOKIE

.clipped {
-webkit-text-fill-color: transparent;
фон-клип: текст; }

Обрезка фонового текста с градиентом

Редактировать октябрь 2018: из-за ошибки в Chrome 69 этот метод теперь использует градиент CSS и свойство отсечения в текстовом элементе.Обычно их можно установить на родителя, что дает большую гибкость.

Для текста задаются свойство обрезки и градиент.

KILLING

OF A
CHINESE BOOKIE

.clipped {
background-clip: text;
-webkit-background-clip: текст;
цвет заливки текста: прозрачный;
-webkit-text-fill-color: прозрачный;
}

Режим наложения

На этот раз к текстовому элементу применяется режим наложения CSS.
Поскольку это режим наложения , а не отсечения , мы можем его анимировать.

УБИЙСТВО

ИЗ А
КИТАЙСКИЙ БУКИ

.difference {mix-blend-mode: difference}

Обводка текста

Свойство отсечения присваивается либо DIV, либо тексту. Это влияет только на текст.

УБИЙСТВО

ИЗ
КИТАЙСКОГО БУКИ

.гладил {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: # d69873; }

Штрих текста + вырезка фона

Редактировать октябрь 2018: из-за ошибки в Chrome 69 этот метод больше не работает. Пример работает, потому что он был изменен.

Текстовые элементы получают свойство обводки или наследуют его.

УБИЙСТВО

ИЗ
КИТАЙСКОГО БУКИ

Использование внешнего изображения в качестве маски

Ссылка на многоугольник SVG с положением (в центре), размером (содержать) и повторением (без повтора) набор.

KILLING

OF A
CHINESE BOOKIE

.masked {
маска-изображение: URL (domain.com/image.sv ), никто;
размер маски: содержать;
повтор маски: без повтора;
положение маски: по центру; }

Сцена трехмерного преобразования по умолчанию

Заголовок перемещен вперед. Для всех дочерних элементов сцены установлена ​​перспектива 1000. Вращение DIV включено hover. Переход на DIV

УБИЙСТВО

OF A
КИТАЙСКИЙ БУКИ

Ограничьте изображение внутри элемента с помощью CSS

подгонка под объект

Чтобы полностью заполнить элемент изображением или задать точные размеры изображения, чтобы оно соответствовало, у вас может возникнуть соблазн использовать изображение в качестве фонового изображения .Это даст желаемый результат, но не так уж хорош с точки зрения доступности и SEO. Фоновое изображение предназначено исключительно для украшения и не рассматривается как иллюстративное изображение, которое является частью содержимого (оно не объявлено в HTML-коде, только в CSS-коде), и у него нет альтернативного текста для его описания. .

Итак, если вам нужно, чтобы изображение вело себя как фоновое изображение с параметрами покрытия, но оставалось изображением HTML, вы можете использовать свойство CSS object-fit .

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

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

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

.поместиться { объект подходит: крышка; }

Также мы контролируем размер изображения с помощью Webflow. Это может быть значение в пикселях, но здесь, поскольку мы указали размеры DIV хоста, мы можем просто указать ширину изображения : 100%, и высоту : 100%.

Вот все значения, которые вы можете повлиять на свойство соответствия объекта:

• fill — это значение по умолчанию. Размер замененного содержимого соответствует размеру поля содержимого элемента. При необходимости объект будет растянут или сплющен, чтобы соответствовать
• . Содержимое — Замененное содержимое масштабируется для сохранения его соотношения сторон при размещении в поле содержимого элемента.
• cover — Размер замененного содержимого изменяется для сохранения соотношения сторон при заполнении все поле содержимого элемента.Объект будет обрезан по размеру
• none — размер замененного содержимого не изменен
• scale down — Размер содержимого будет таким, как если бы он не был указан или содержал (приведет к уменьшению размера конкретного объекта)

none

обложка

содержит

масштабирование

заливка

атрибут клипа | зажим Свойство

---

Устанавливает или извлекает, какая часть позиционированного объекта видна.

Синтаксис

HTML	{ clip: sClip}
Создание сценариев	объект .style.clip [ = sClip]

Возможные значения

sClip

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

Свойство доступно для чтения / записи со значением по умолчанию auto; атрибут каскадных таблиц стилей (CSS) не наследуется.

Выражения могут использоваться вместо предшествующих значений, начиная с Microsoft® Internet Explorer 5. Для получения дополнительной информации см. Динамические свойства.

Замечания

Это свойство определяет форму и размер видимого позиционированного объекта. Положение должно быть абсолютным. Любая часть объекта, выходящая за пределы области отсечения, прозрачна. Любую координату можно заменить значением auto, которое показывает соответствующую сторону (то есть сторона не обрезана).

Порядок значений clip : rect (0 0 50 50) делает объект невидимым, поскольку он устанавливает верхнее и правое положение области отсечения на 0.Чтобы получить размер порта просмотра 50 на 50, используйте клип : rect (0 50 50 0).

Атрибут clip и свойство clip доступны на платформе Macintosh, начиная с Internet Explorer 5.

Пример

В следующих примерах используется атрибут clip и свойство clip для изменения внешнего вида изображения.

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

Образец кода

Для этой функции требуется Internet Explorer 4.0 или более поздняя версия. Щелкните значок ниже, чтобы установить последнюю версию. Затем перезагрузите эту страницу, чтобы просмотреть образец.

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

 
<КНОПКА
   >
    Обрезать изображение 
 

Для этой функции требуется Internet Explorer 4.0 или более поздняя версия. Щелкните значок ниже, чтобы установить последнюю версию. Затем перезагрузите эту страницу, чтобы просмотреть образец.

Применимо к

CE [Имя объекта] Платформа Версия Win16: Win32: Mac: Unix: Данные о версии отображаются при наведении указателя мыши на ссылку или при нахождении ссылки в фокусе.

А, АДРЕС, ЯБЛОКО, B, BDO, БОЛЬШОЙ, BLOCKQUOTE, КНОПКА, ЦЕНТР, CITE, КОД, обычай, DD, DFN, DIR, DIV, DL, DT, ЭМ, EMBED, FIELDSET, ФОРМА, Hn, HR, Я, IFRAME, IMG, INPUT type = кнопка, INPUT type = флажок, INPUT type = file, INPUT type = image, INPUT type = пароль, Тип ВХОДА = радио, Тип ВХОДА = сброс, INPUT type = submit, INPUT type = text, ISINDEX, KBD, МЕТКА, ЛЕГЕНДА, LI, ЛИСТИНГ, Марки, МЕНЮ, ОБЪЕКТ, ПР, П, PRE, РУБИН, runtimeStyle, S, SAMP, ВЫБРАТЬ, МАЛЕНЬКИЙ, ОХВАТЫВАТЬ, ЗАБАСТОВКА, СИЛЬНЫЙ, стиль, SUB, КАК ДЕЛА, СТОЛ, TD, ТЕКСТАРА, TH, TR, ТТ, U, UL, VAR, XMP

См.

No related posts.