Klipová cesta - Triky CSS

Obsah

clip-pathVlastnosť CSS umožňuje určiť špecifickú oblasť prvku na displeji, pričom zvyšná časť bola skrytá (alebo "pripnutý") preč.

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

Predtým tu bola clipnehnuteľnosť, ale je to zastarané.

Najbežnejším prípadom použitia by bol obrázok, ale nie je to obmedzené iba na tento prípad. Rovnako ľahko môžete použiť clip-pathznačku odseku a iba časť textu.

 

 I'll be clipped.

Tieto štyri hodnoty v inset()(v CSS vyššie) predstavujú horný / ľavý bod a dolný / pravý bod, ktoré tvoria viditeľný obdĺžnik. Všetko mimo tohto obdĺžnika je skryté.

Tento obrázok Louisa Lazarisa veľmi dobre vysvetľuje štyri pointy starej clip: rect();syntaxe .

Ďalšie 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%); )

Príklad cesty klipu SVG:

Je veľmi čudné, že clip-pathnepodporovala path()funkciu mimo brány, pretože path()pre vlastnosti typu to už je vec motion-path. Prehliadač Firefox ho však teraz podporuje a čakáme na ďalšie prehľadávače. Viď Počiatočná implementácia clip-path: path ();

Vytvorte si vlastný

Kým dokážeme spoľahlivo použiť path(), sú najužitočnejšie klipy pre efektné vlastné tvary polygon(). Tu je skutočne úhľadný editor pre editorov od Mads Stoumann (ktorý funguje aj pre kruhy a elipsy):

Viac informácií

  • Orezávanie a maskovanie v CSS
  • clip-path na WPD
  • clip-path na MDN
  • Clippy: výrobca klipartových dráh Bennetta Feelyho
  • Orezávanie a maskovanie na MDN
  • (Zastaraná) vlastnosť 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
  • Perá označili príchytku na CodePen
  • Ukážky a podpora prehliadača, demo Pen od spoločnosti Yoksel
  • Masky SVG od Jakoba Jenkova
  • Výskum Alana Greenblatta o úrovniach podpory prehľadávačov pre funkcie orezávania a maskovania

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
91 54 Nie 88 TP *

Mobil / tablet

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

Zaujímavé články...