Clip-path - CSS-triki

Kazalo

clip-pathHotel v CSS omogoča, da določite določeno regijo element na zaslonu, z ostalo pa skrita (ali "pristrižene") proč.

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

Včasih je bila cliplastnost, vendar upoštevajte, da je zastarela.

Najpogostejši primer uporabe bi bila slika, vendar ni omejena na to. Prav tako lahko uporabite clip-pathoznako odstavka in samo del besedila.

 

 I'll be clipped.

Te štiri vrednosti v inset()(v CSS zgoraj) predstavljajo zgornjo / levo točko in spodnjo / desno točko, ki tvori vidni pravokotnik. Vse zunaj tega pravokotnika je skrito.

Ta podoba Louisa Lazarisa zelo dobro pojasnjuje štiri točke stare clip: rect();sintakse .

Druge možne vrednosti:

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

Primer poti posnetka SVG:

Zelo čudno je, da clip-pathni podpiral path()funkcije zunaj vrat, saj path()to že velja za lastnosti, kot je motion-path. Firefox ima zdaj podporo zanj in čakamo na ostale brskalnike. Glejte Začetna izvedba clip-path: path ();

Naredi svoje

Dokler ne bomo mogli zanesljivo uporabljati path(), so najbolj uporabne sponke za modne oblike po meri polygon(). Tu je zares urejen urejevalnik za Mads Stoumann (ki deluje tudi za kroge in elipse):

Več informacij

  • Izrezovanje in maskiranje v CSS
  • clip-path na WPD
  • clip-path na MDN
  • Clippy: Izdelovalec posnetkov poti Bennetta Feelyja
  • Izrez in maskiranje na MDN
  • (Zastarela) lastnost izrezka CSS (impresivne spletne strani)
  • Specifikacije o maskiranju CSS
  • Maskiranje CSS Dirka Schulzeja
  • Izrezovanje v CSS in SVG - Lastnost in element posnetka poti avtorice Sara Soueidan
  • Peresa so na CodePen označila pot posnetka
  • Predstavitve in podpora za brskalnike demo Pen by Yoksel
  • SVG Maske Jakoba Jenkova
  • Raziskava Alana Greenblatta o stopnjah podpore brskalnikov za izrezovanje in maskiranje funkcij

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
91 54 Ne 88 TP *

Mobilni / tablični računalnik

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

Zanimive Članki...