Generator clip-patha

Kako koristiti generator clip-patha

1. Odaberi Oblik: Poligon, Krug, Elipsa ili Inset. Blijedi sloj prikazuje cijeli element, a svijetli ono što ostaje vidljivo nakon izrezivanja.
2. Povuci točke u uređivaču. Kod poligona je svaka točka jedan vrh; klikni bilo gdje u području da dodaš točku na najbliži rub. Kod kruga ili elipse povuci središte i točke polumjera. Kod inseta povuci četiri točke na rubovima.
3. Fino podesi u poljima ispod: popis Točke (X i Y u postocima, s gumbima Ukloni i Dodaj točku) za poligone ili polja Polumjer, Središte X, Središte Y, Gore, Desno, Dolje, Lijevo i Zaobljeni kutovi (px) za ostale oblike.
4. Brže počni s Predlošcima: trokut, trapez, paralelogram, romb, peterokut, šesterokut, osmerokut, zakošeni kutovi, zvijezda, križ, strelice, chevron, oblačić, krug, elipsa i inset.
5. Uključi Poravnaj na 5 % za uredne vrijednosti i Dodaj -webkit-clip-path (stari Safari) ako još podržavaš Safari 13.0 ili stariji.
6. Po želji ispusti fotografiju u Pozadinska slika (neobavezno) da vidiš oblik na vlastitoj slici. Datoteka se nikad ne šalje.
7. Kopiraj CSS kod gumbom Kopiraj.

Tipkovnica: fokusiraj točku, pomiči je tipkama sa strelicama (1 %, a uz Shift 10 %) i pritisni Delete da ukloniš točku poligona. Poligon uvijek ima najmanje tri točke.

Funkcije oblika za clip-path

clip-path skriva sve izvan oblika. Element zadržava svoju veličinu u rasporedu; izrezuju se samo iscrtavanje i područje klika.

• polygon(x1 y1, x2 y2, …) spaja točke redom i zatvara oblik. polygon(50% 0%, 100% 100%, 0% 100%) je trokut okrenut prema gore. Koordinate počinju u gornjem lijevom kutu elementa.
• circle(r at cx cy): circle(50% at 50% 50%) je najveći krug usred elementa. Postotni polumjer računa se prema dijagonali elementa podijeljenoj s √2, pa je jednak udjelu širine samo kod kvadratnih elemenata.
• ellipse(rx ry at cx cy): vodoravni polumjer je udio širine, a okomiti udio visine.
• inset(top right bottom left round radius) izrezuje pravokutnik unutar rubova, s istom skraćenom oznakom od jedne do četiri vrijednosti kao kod margina i s neobaveznim zaobljenim kutovima.

Ovaj alat zapisuje postotke pa se oblik skalira s elementom, bez obzira na njegovu veličinu.

Savjeti za dobre oblike

• Redoslijed točaka poligona je važan: obilazak ruba u smjeru kazaljke na satu (ili obrnuto) izbjegava ukrižene oblike poput „leptir-mašne“.
• Dva oblika s jednakim brojem točaka mogu se animirati: transition: clip-path 0.4s glatko pretapa jedan šesterokut u drugi. Preglednik ne može interpolirati poligone s različitim brojem točaka.
• clip-path izrezuje i box-shadow i obrube. Da izrezanom obliku dodaš sjenu, stavi filter: drop-shadow() na roditeljski element.
• Izrezana područja ne primaju klikove ni prelazak miša, što je zgodno za nepravilne gumbe.