Clip-path - CSS-трикове

Съдържание

В clip-pathимота в CSS ви позволява да посочите конкретен регион на елемент на дисплея, заедно с останалите скрит (или "подстригва") разстояние.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

По-рано имаше clipсвойство, но имайте предвид, че е оттеглено.

Най-често използваният случай би бил изображение, но това не се ограничава само до това. Можете също толкова лесно да приложите clip-pathетикет на абзац и само част от текста.

 

 I'll be clipped.

Тези четири стойности в inset()(в CSS по-горе) представляват горната / лявата точка и долната / дясната точка, която образува видимия правоъгълник. Всичко извън този правоъгълник е скрито.

Това изображение на Луис Лазарис много добре обяснява четирите точки на стария clip: rect();синтаксис .

Други възможни стойности:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Примерен път на SVG клип:

Много е странно, че clip-pathне поддържаше path()функцията извън портата, тъй като path()вече е нещо като свойства като motion-path. Firefox вече има поддръжка за него и ние чакаме останалите браузъри. Вижте Първоначално внедряване на clip-path: path ();

Направи си собствен

Докато не можем да използваме надеждно path(), най-полезните клипове за изискани потребителски форми са polygon(). Ето един наистина чист редактор за тези от Mads Stoumann (който работи и за кръгове и елипси):

Повече информация

  • Изрязване и маскиране в CSS
  • clip-path на WPD
  • clip-path на MDN
  • Clippy: Производителят на клип пътеки на Bennett Feely
  • Изрязване и маскиране на MDN
  • (Оттеглено) свойство CSS Clip (впечатляващи мрежи)
  • Спецификация за CSS маскиране
  • CSS маскиране от Dirk Schulze
  • Изрязване в CSS и SVG - Свойството и елементът на клип-пътя от Сара Суейдан
  • Писалки, маркирани с път на клип на CodePen
  • Демонстрации и поддръжка на браузър демо от Pen от Yoksel
  • SVG Маски от Якоб Йенков
  • Изследване на Алън Грийнблат относно нивата на поддръжка на браузъра за изрязване и маскиране на функции

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
91 54 Не 88 TP *

Мобилен / таблет

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

Интересни статии...