Свойство 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(). Вот действительно удобный редактор, который также работает с кругами и эллипсами:

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

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

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

Эффект вращения с помощью CSS3
Эффект вращения с помощью CSS3
CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

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

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

Градиентная обводка блока на CSS
Градиентная обводка блока на CSS

Как сделать красивую градиентную обводку блока на одном только CSS? Для этого мы сделаем следующее:

1. Создадим div.linear-gradient с градиентным фоном;

2. Создадим внутренний блок div с небольшим отступом.


Несколько полезных CSS-трюков для Front-end разработчиков
Несколько полезных CSS-трюков для Front-end разработчиков
Хотим поделиться с вами несколькими CSS трюками, которые вам точно пригодятся при создании сайтов. Они позволят вам без использования Javascript создать анимацию и эффекты.

Бесплатный ФРОНТЭНД
Бесплатный ФРОНТЭНД
Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

QRcode

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

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

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