Klippesti - CSS-triks

Innholdsfortegnelse

Den clip-patheiendom i CSS kan du angi en bestemt region av et element til skjerm, med resten blir skjult (eller “klippet”) unna.

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

Det pleide å være en clipeiendom, men vær oppmerksom på at den er utfaset.

Den vanligste brukssaken vil være et bilde, men det er ikke begrenset til det. Du kan like gjerne bruke clip-pathet avsnittstagg og bare en del av teksten.

 
 I'll be clipped.

Disse fire verdiene i inset()(i CSS over) representerer topp / venstre punkt og bunn / høyre punkt, som danner det synlige rektangelet. Alt utenfor det rektangelet er skjult.

Dette bildet av Louis Lazaris forklarer de fire punktene i den **gamle `clip: rect();`syntaksen** veldig bra.

Andre mulige verdier:

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

Eksempel på SVG-klippebane:

Det er veldig rart som clip-pathikke støttet path()funksjonen ut av porten, siden path()det allerede er en ting for eiendommer som motion-path. Firefox har støtte for det nå skjønt, og vi venter på resten av nettleserne. Se En første implementering av klippesti: sti ();

Lag din egen

Inntil vi kan bruke pålitelig path(), er de mest nyttige klippene for fancy tilpassede former polygon(). Her er en veldig fin redaktør for de fra Mads Stoumann (som også fungerer for sirkler og ellipser):

Mer informasjon

Klipping og maskering i CSS
klippesti på WPD
klippesti på MDN
Clippy: Bennett Feelys produsent av klippestier
Klipping og maskering på MDN
Den (utfasede) CSS Clip Property (imponerende nett)
Spesifikasjon på CSS Masking
CSS Masking av Dirk Schulze
Clipping in CSS and SVG - The clip-path Property and Element av Sara Soueidan
Penner merket klippesti på CodePen
Demoer og nettleser støtter demo Pen fra Yoksel
SVG Masks av Jakob Jenkov
Alan Greenblatts forskning om nettleserstøttenivåer for klipping og maskeringsfunksjoner