Clip-path - Triky CSS

Obsah

clip-pathVlastnost CSS umožňuje určit specifickou oblast prvku na displeji, přičemž zbývající část byla skrytá (nebo „připnutý“) pryč.

.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 */ )

Bývala clipvlastnost, ale všimněte si, že je zastaralá.

Nejběžnějším případem použití by byl obrázek, ale není to omezeno na to. Stejně snadno můžete použít clip-pathznačku odstavce a pouze část textu.

 
 I'll be clipped.

Tyto čtyři hodnoty v inset()(v CSS výše) představují horní / levý bod a dolní / pravý bod, který tvoří viditelný obdélník. Vše mimo tento obdélník je skryto.

Tento obrázek Louise Lazarise velmi dobře vysvětluje čtyři body **staré `clip: rect();`syntaxe** .

Další možné hodnoty:

.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%); )

Příklad cesty klipu SVG:

Je velmi podivné, že clip-pathnepodporovala path()funkci mimo bránu, protože path()to už je něco jako vlastnosti motion-path. Firefox pro to nyní podporuje a my čekáme na zbytek prohlížečů. Viz Počáteční implementace clip-path: path ();

Vytvořte si vlastní

Dokud nebudeme moci spolehlivě použít path(), jsou nejužitečnější klipy pro efektní vlastní tvary polygon(). Tady je opravdu pěkný editor pro ty od Mads Stoumann (který funguje také pro kruhy a elipsy):

Více informací

Ořezávání a maskování v CSS
clip-path na WPD
clip-path na MDN
Clippy: Bennett Feely's clip-path maker
Ořezávání a maskování na MDN
(Zastaralá) vlastnost klipu CSS (působivé weby)
Spec on CSS Masking
CSS Masking od Dirka Schulzeho
Clipping in CSS and SVG - The Clip-path Property and Element od Sary Soueidan
Pera označená clip-path na CodePen
Dema a podpora prohlížeče demo Pen od Yoksel
SVG Masky od Jakoba Jenkova
Výzkum Alana Greenblatta týkající se úrovní podpory prohlížečů pro funkce ořezávání a maskování

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.