Klipu ceļš - CSS-triki

Satura rādītājs

clip-pathĪpašums CSS ļauj norādīt konkrētu reģionu elementa uz displeja, un pārējais tiek slēpts (vai "apgriezti") attālumā.

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

Kādreiz bija clipīpašums, taču ņemiet vērā, ka tas ir novecojis.

Visizplatītākais lietošanas gadījums būtu attēls, taču tas neaprobežojas tikai ar to. Tikpat viegli jūs varētu lietot clip-pathrindkopas tagu un tikai daļu no teksta.

 

 I'll be clipped.

Šīs četras vērtības inset()(CSS augšpusē) apzīmē augšējo / ​​kreiso punktu un apakšējo / ​​labo punktu, kas veido redzamo taisnstūri. Viss ārpus šī taisnstūra ir paslēpts.

Šis Luisa Lazarisa attēls ļoti labi izskaidro vecās clip: rect();sintakses četrus punktus .

Citas iespējamās vērtības:

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

SVG klipa ceļa piemērs:

Tas ir ļoti dīvaini, ka clip-pathneatbalstīja path()funkciju ārpus vārtiem, jo path()tas jau ir tāds īpašums kā motion-path. Tomēr Firefox to tagad atbalsta, un mēs gaidām pārējos pārlūkus. Skatiet sadaļu Sākotnējā klipa ceļa ieviešana: ceļš ();

Izveido pats

Kamēr mēs nevaram droši to izmantot path(), visizdevīgākie klipi iedomātā pasūtījuma formām ir polygon(). Šeit ir patiešām veikls redaktors tiem, kas ir no Mads Stoumann (kas darbojas arī apļiem un elipsiem):

Vairāk informācijas

  • Nogriešana un maskēšana CSS
  • klipu ceļš WPD
  • videoklipa ceļš MDN
  • Clippy: Bennett Feely klipu ceļu veidotājs
  • Nogriešana un maskēšana uz MDN
  • (Novecojis) CSS klipa rekvizīts (iespaidīgi tīmekļi)
  • Specifikācija CSS maskēšanai
  • Dirka Šulces CSS maskēšana
  • CSS un SVG apgriešana - Sara Soueidan klipu ceļš Īpašums un elements
  • Pildspalvas ar atzīmi klipu ceļš vietnē CodePen
  • Demokrāti un pārlūkprogramma atbalsta Yoksel demonstrācijas pildspalvu
  • Jakoba Jenkova SVG maskas
  • Alana Grīnblata pētījumi par pārlūka atbalsta līmeņiem apgriešanas un maskēšanas funkcijām

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
91 54. lpp Nē 88 TP *

Mobilais / planšetdators

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

Interesanti raksti...