Clip-path - CSS-trikovi

Sadržaj

clip-pathNekretnina u CSS vam omogućuje da odredite određenu regiju elementa na zaslonu, a ostalo se skriva (ili „ošišan”) daleko.

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

Nekad je bilo clipsvojstvo, ali imajte na umu da je to zastarjelo.

Najčešći slučaj korištenja bila bi slika, ali nije ograničena na to. Jednako se lako možete primijeniti clip-pathna oznaku odlomka i samo na dio teksta.

 

 I'll be clipped.

Te četiri vrijednosti u inset()(u CSS-u gore) predstavljaju gornju / lijevu točku i donju / desnu točku, što tvori vidljivi pravokutnik. Sve izvan tog pravokutnika je skriveno.

Ova slika Louisa Lazarisa vrlo dobro objašnjava četiri točke stare clip: rect();sintakse .

Ostale moguće vrijednosti:

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

Primjer puta SVG isječka:

Vrlo je čudno što clip-pathnije podržavalo path()funkciju izvan vrata, jer path()je to već stvar za svojstva poput motion-path. Firefox za to sada ima podršku, a mi čekamo ostatak preglednika. Pogledajte početnu implementaciju clip-path: path ();

Napravite svoje

Dok ne budemo mogli pouzdano koristiti path(), najkorisniji isječci za otmjene prilagođene oblike su polygon(). Evo stvarno urednog urednika za one iz Mads Stoumanna (koji radi i za krugove i elipse):

Više informacija

  • Isecanje i maskiranje u CSS-u
  • clip-path na WPD-u
  • clip-path na MDN-u
  • Clippy: Izrađivač putova isječaka Bennetta Feelyja
  • Isecanje i maskiranje na MDN
  • (Zastarelo) svojstvo CSS isječka (impresivne mreže)
  • Specifikacije o CSS maskiranju
  • CSS maskiranje Dirka Schulzea
  • Isecanje u CSS-u i SVG-u - Svojstvo i element isječka puta Sara Soueidan
  • Olovke označene putem clip-a na CodePenu
  • Demo i podrška za preglednike demo Pen by Yoksel
  • SVG maske Jakoba Jenkova
  • Istraživanje Alana Greenblatta na razinama podrške preglednika za izrezivanje i maskiranje značajki

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
91 54 Ne 88 TP *

Mobitel / tablet

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

Zanimljivi članci...