Свойство clip-path

Свойство clip-path
Свойство clip-path

Свойство clip-path в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”).

.clip-me {  
  
  /* Пример: отрезать элемент от верхнего, правого, нижнего и левого краев */
  clip-path: inset(10px 20px 30px 40px); /* или "none" */
  
  /* Пример: вырезание элемента в семиугольник */
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);


  /* Устаревшая версия */
  position: absolute; /* требуется абсолютное или фиксированное позиционирование */
  clip: rect(110px, 160px, 170px, 60px); /* или "auto" */
  /* значения описывают верхнюю/левую точку и нижнюю/правую точку */
} 

Раньше существовало свойствоclip , но обратите внимание, что оно устарело.

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

<img class="clip-me" src="/images/image-to-be-clipped.png" alt="Descriptioin of image">

<p class="clip-me">
  Я буду обрезан.
</p>

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

клип-визуальный
Это изображение очень хорошо объясняет четыре пункта старого clip: rect(); синтаксиса.

Другие возможные значения:

.clip-me { 

  /* ссылка на путь из встроенного SVG  */
  clip-path: url(#c1); 

  /* путь ссылки из внешнего SVG*/
  clip-path: url(path.svg#c1);

  /* многоугольник */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* окружность */
  clip-path: circle(30px at 35px 35px);

  /* элипс */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() может заменить inset() ? */
  /* rectangle() в ближайшей SVG 2 */

  /* закругленные углы ... не уверен, что вещь больше */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

Пример пути к клипу SVG:

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />
</clipPath>

Очень странно, что clip-path не поддерживалась path() функция out of the gate, поскольку path() это уже относится к таким свойствам, как motion-path. В Firefox теперь есть поддержка для этого, и мы ждем остальных браузеров.

Создайте свой собственный

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

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

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

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

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

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

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

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

Имитация стрелочных часов с помощью новых тригонометрических функций CSS sin() и cos ()
Имитация стрелочных часов с помощью новых тригонометрических функций CSS sin() и cos ()
Тригонометрические функции CSS есть в последних версиях Firefox и Safari. Наличие такого рода математической мощи в CSS открывает целую кучу возможностей. В этом материале мы применим пару новых функций: sin()и cos().

QRcode

2010-2023 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.