Generator clip-path oblika

Kako se koristi generator clip-path oblika

1. Izaberi Oblik: Poligon, Krug, Elipsa ili Pravougaonik (inset). Izbledeli sloj prikazuje ceo element, a svetli sloj ono što ostaje vidljivo posle isecanja.
2. Prevlači tačke u uređivaču. Kod poligona svaka tačka je jedno teme, a klikom bilo gde na površini dodaješ tačku na najbližoj ivici. Kod kruga ili elipse prevlači centar i tačke poluprečnika. Kod pravougaonika (inset) prevlači četiri tačke na ivicama.
3. Fino podesi u poljima ispod: lista Tačke (X i Y u procentima, sa Ukloni i Dodaj tačku) za poligone, odnosno polja Poluprečnik, Centar X, Centar Y, Gore, Desno, Dole, Levo i Zaobljeni uglovi (px) za ostale oblike.
4. Brže počni uz Gotovi oblici: trougao, trapez, paralelogram, romb, petougao, šestougao, osmougao, zakošene uglove, zvezdu, krst, strelice, šajkaču, oblačić za govor, krug, elipsu i inset.
5. Uključi Prianjanje na 5 % za uredne vrednosti i Dodaj -webkit-clip-path (stari Safari) ako još podržavaš Safari 13.0 ili stariji.
6. Po želji spusti fotografiju u Slika u pozadini (opcionalno) da vidiš oblik na svojoj slici. Fajl se nikada ne otprema.
7. Kopiraj CSS kod dugmetom Kopiraj.

Tastatura: fokusiraj tačku, pomeraj je strelicama (1 %, a uz Shift 10 %) i pritisni Delete da ukloniš tačku poligona. Poligon uvek zadržava bar tri tačke.

Funkcije oblika u clip-path

clip-path skriva sve van oblika. Element zadržava svoju veličinu u rasporedu, a isecaju se samo iscrtavanje i površina na koju 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 levom uglu elementa.
• circle(r at cx cy): circle(50% at 50% 50%) je najveći krug centriran u elementu. Poluprečnik u procentima računa se u odnosu na dijagonalu elementa podeljenu sa √2, pa je jednak delu širine samo kod kvadratnih elemenata.
• ellipse(rx ry at cx cy): horizontalni poluprečnik je deo širine, a vertikalni deo visine.
• inset(top right bottom left round radius) seče pravougaonik unutar ivica, sa istim skraćenim zapisom od jedne do četiri vrednosti kao kod margina i opcionalnim zaobljenim uglovima.

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

Saveti za dobre oblike

• Redosled tačaka poligona je bitan: obilaženje ivice u smeru kazaljke na satu (ili suprotno) izbegava ukrštene oblike „leptir-mašne“.
• Dva oblika sa istim brojem tačaka mogu da se animiraju: transition: clip-path 0.4s glatko preobražava šestougao u drugi šestougao. Pregledač ne može da interpolira poligone sa različitim brojem tačaka.
• clip-path iseca i box-shadow i okvire. Da bi isečeni oblik dobio senku, stavi filter: drop-shadow() na roditeljski element.
• Isečene površine ne primaju klikove ni prelazak mišem, što je zgodno za dugmad nepravilnog oblika.

Alat radi u tvom pregledaču. Ništa što upišeš ne šalje se na server.