Цлип-патх - ЦСС-трикови

Преглед садржаја

clip-pathИмовина у ЦСС-у омогућава да одредите одређени регион елемента на екрану, а остатак се приказује (или "исекао") далеко.

.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()(у ЦСС-у изнад) представљају горњу / леву тачку и доњу / десну тачку, које чине видљиви правоугаоник. Све изван тог правоугаоника је скривено.

Ова слика Луиса Лазариса одлично објашњава четири тачке старе 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%); )

Пример путање СВГ клипа:

Веома је чудно што clip-pathније подржало path()функцију ван капије, јер path()је то већ ствар за својства попут motion-path. Фирефок за то сада има подршку, а ми чекамо остатак прегледача. Погледајте почетну примену цлип-патх: патх ();

Маке Иоур овн

Док не будемо могли поуздано да користимо path(), најкориснији исјечци за отмјене прилагођене облике су polygon(). Ево заиста уредног уредника за оне од Мадс Стоуманна (који такође ради и за кругове и елипсе):

Више информација

  • Исецање и маскирање у ЦСС-у
  • цлип-патх на ВПД-у
  • цлип-патх на МДН
  • Цлиппи: Израђивач путање исјечака Беннетт Феели
  • Исецање и маскирање на МДН
  • (Застарело) својство ЦСС исечка (импресивне мреже)
  • Спецификације о ЦСС маскирању
  • ЦСС маскирање Дирка Сцхулзеа
  • Исецање у ЦСС-у и СВГ-у - Својство и елемент клипове пута Сара Соуеидан
  • Оловке су на ЦодеПен-у означиле пут за исечак
  • Демо и подршка за прегледаче демо Пен би Иоксел
  • СВГ маске Јакоба Јенкова
  • Истраживање Алана Греенблатта о нивоима подршке прегледача за функције исецања и маскирања

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
91 54 Не 88 ТП *

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

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 14,0-14,4 *

Занимљиви Чланци...