Generator clip-path

Kako koristiti generator clip-path

1. Odaberi Oblik: Poligon, Krug, Elipsa ili Inset. Zasjenjeni sloj prikazuje cijeli element, a svijetli sloj ono što ostaje vidljivo nakon izrezivanja.
2. Prevlači tačke u uređivaču. Kod poligona je svaka tačka jedan ugao; klikni bilo gdje u površini da dodaš tačku na najbližoj ivici. Kod kruga ili elipse prevlači središte i tačke radijusa. Kod insta prevlači četiri tačke na ivicama.
3. Fino podešavanje radi u poljima ispod: lista Tačke (X i Y u postocima, s Ukloni i Dodaj tačku) za poligone, ili polja Radijus, Središte X, Središte Y, Gore, Desno, Dolje, Lijevo i Zaobljeni uglovi (px) za ostale oblike.
4. Brže počni s Predlošci: trougao, trapez, paralelogram, romb, petougao, šestougao, osmougao, zakošeno, zvijezda, križ, strelice, ševron, oblačić za govor, krug, elipsa i inset.
5. Uključi Poravnaj na 5 % za uredne vrijednosti, a Dodaj -webkit-clip-path (stari Safari) ako još podržavaš Safari 13.0 ili stariji.
6. Po želji spusti fotografiju u Pozadinska slika (neobavezno) da vidiš oblik na svojoj slici. Datoteka se nikad ne šalje na server.
7. Kopiraj CSS kôd dugmetom Kopiraj.

Tastatura: fokusiraj tačku, pomjeraj je tipkama sa strelicama (1 %, a uz Shift 10 %) i pritisni Delete da ukloniš tačku poligona. Poligon uvijek zadržava najmanje tri tačke.

Funkcije oblika svojstva clip-path

clip-path sakriva sve izvan nekog oblika. Element zadržava svoju veličinu u rasporedu; izrezuju se samo iscrtavanje i područje na koje se može kliknuti.

• polygon(x1 y1, x2 y2, …) spaja tačke redom i zatvara oblik. polygon(50% 0%, 100% 100%, 0% 100%) je trougao okrenut nagore. Koordinate počinju u gornjem lijevom uglu elementa.
• circle(r at cx cy): circle(50% at 50% 50%) je najveći krug centriran u elementu. Radijus u postocima računa se prema dijagonali elementa podijeljenoj sa √2, pa je jednak dijelu širine samo kod kvadratnih elemenata.
• ellipse(rx ry at cx cy): horizontalni radijus je dio širine, a vertikalni dio visine.
• inset(top right bottom left round radius) izrezuje pravougaonik unutar ivica, sa istom skraćenom oznakom od jedne do četiri vrijednosti kao kod margina i neobaveznim zaobljenim uglovima.

Ovaj alat piše postotke, pa se oblik skalira sa elementom bez obzira na njegovu veličinu.

Savjeti za dobre oblike

• Redoslijed tačaka poligona je važan: obilaženje ivice u smjeru kazaljke na satu (ili suprotno) izbjegava ukrštene oblike „leptir mašne“.
• Dva oblika s istim brojem tačaka mogu se animirati: transition: clip-path 0.4s glatko pretvara jedan šestougao u drugi. Preglednik ne može interpolirati između poligona s različitim brojem tačaka.
• clip-path izrezuje i box-shadow i okvire. Da izrezanom obliku daš sjenu, stavi filter: drop-shadow() na roditeljski element.
• Izrezana područja ne primaju klikove niti prelazak mišem, što je zgodno za nepravilna dugmad.

Sve se događa u tvom pregledniku. Ništa što upišeš ne šalje se na server.