Klip-sti - CSS-tricks

Indholdsfortegnelse

Den clip-pathejendom i CSS kan du angive en specifik region af et element til visning, med resten bliver skjult (eller ”klippet”) væk.

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

Der plejede at være en clipejendom, men bemærk, at den er udfaset.

Den mest almindelige brugssag ville være et billede, men det er ikke begrænset til det. Du kan lige så let anvende clip-pathpå et afsnitstag og kun en del af teksten.

 

 I'll be clipped.

Disse fire værdier i inset()(i CSS ovenfor) repræsenterer det øverste / venstre punkt og det nederste / højre punkt, som danner det synlige rektangel. Alt uden for det rektangel er skjult.

Dette billede af Louis Lazaris forklarer de fire punkter i den gamle clip: rect();syntaks meget godt.

Andre mulige værdier:

.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-klipsti:

Det er meget underligt, at clip-pathdet ikke understøttede path()funktionen ud af porten, da path()det allerede er en ting for ejendomme som motion-path. Firefox har dog støtte til det nu, og vi venter på resten af ​​browserne. Se en indledende implementering af klipsti: sti ();

Lav din egen

Indtil vi pålideligt kan bruge path(), er de mest nyttige klip til smarte tilpassede former polygon(). Her er en rigtig pæn redaktør for dem fra Mads Stoumann (som også fungerer for cirkler og ellipser):

Mere information

  • Klipning og maskering i CSS
  • klip-sti på WPD
  • klip-sti på MDN
  • Clippy: Bennett Feelys clip-path maker
  • Klipning og maskering på MDN
  • Den (forældede) CSS-klipegenskab (imponerende webs)
  • Specifikation for CSS-maskering
  • CSS Masking af Dirk Schulze
  • Klipning i CSS og SVG - Klipstien Property and Element af Sara Soueidan
  • Kuglepen tagget klipsti på CodePen
  • Demoer og browser understøtter demo Pen fra Yoksel
  • SVG Masker af Jakob Jenkov
  • Alan Greenblatts forskning om browsersupportniveauer til klipning og maskeringsfunktioner

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
91 54 Ingen 88 TP *

Mobil / tablet

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

Interessante artikler...