Generator clip-path

Kako uporabljati generator clip-path

1. Izberi Oblika: Mnogokotnik, Krog, Elipsa ali Pravokotnik (inset). Zbledela plast prikazuje celoten element, svetla pa tisto, kar po obrezovanju ostane vidno.
2. Povleci pike v Urejevalnik oblike. Pri mnogokotniku je vsaka pika oglišče; klikni kamor koli v območje, da dodaš točko na najbližjem robu. Pri krogu ali elipsi povleci središče in pike polmera. Pri pravokotniku povleci štiri pike na robovih.
3. Natančno nastavi v poljih spodaj: seznam Točke (X in Y v odstotkih, z gumboma Odstrani in Dodaj točko) za mnogokotnike ali polja Polmer, Središče X, Središče Y, Zgoraj, Desno, Spodaj, Levo in Zaobljeni vogali (px) za druge oblike.
4. Hitreje začneš s Predloge: trikotnik, trapez, paralelogram, romb, peterokotnik, šesterokotnik, osmerokotnik, prirezani vogali, zvezda, križ, puščici, chevron, govorni oblaček, krog, elipsa in pravokotnik.
5. Obkljukaj Pripni na 5 % za urejene vrednosti in Dodaj -webkit-clip-path (stari Safari), če še vedno podpiraš Safari 13.0 ali starejši.
6. Po želji v Slika v ozadju (neobvezno) spusti fotografijo, da vidiš obliko na svoji sliki. Datoteka se nikoli ne naloži na strežnik.
7. Kodo Koda CSS kopiraš z gumbom Kopiraj.

Tipkovnica: izberi piko, jo premikaj s smernimi tipkami (1 %, s Shiftom 10 %) in pritisni Delete, da odstraniš točko mnogokotnika. Mnogokotnik ohrani vsaj tri točke.

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Oblikovne funkcije lastnosti clip-path

clip-path skrije vse zunaj oblike. Element v postavitvi ohrani svojo velikost; obrezana sta samo izris in območje, ki se odziva na klike.

• polygon(x1 y1, x2 y2, …) poveže točke po vrsti in obliko zapre. polygon(50% 0%, 100% 100%, 0% 100%) je trikotnik, obrnjen navzgor. Koordinate se začnejo v zgornjem levem kotu elementa.
• circle(r at cx cy): circle(50% at 50% 50%) je največji krog, centriran v elementu. Odstotni polmer je relativen glede na diagonalo elementa, deljeno s √2, zato je enak deležu širine samo pri kvadratnih elementih.
• ellipse(rx ry at cx cy): vodoravni polmer je delež širine, navpični pa delež višine.
• inset(top right bottom left round radius) izreže pravokotnik znotraj robov z enako okrajšavo od ene do štirih vrednosti kot pri robovih (margin) in z neobveznimi zaobljenimi vogali.

To orodje zapisuje odstotke, zato se oblika skalira skupaj z elementom, ne glede na njegovo velikost.

Nasveti za dobre oblike

• Vrstni red točk mnogokotnika je pomemben: če greš okoli roba v smeri urinega kazalca (ali v nasprotni smeri), se izogneš prekrižanim oblikam v obliki metuljčka.
• Oblike z enakim številom točk lahko animiraš: transition: clip-path 0.4s gladko pretopi šesterokotnik v drug šesterokotnik. Brskalnik ne more interpolirati med mnogokotniki z različnim številom točk.
• clip-path obreže tudi box-shadow in obrobe. Če želiš obrezani obliki dodati senco, daj filter: drop-shadow() nadrejenemu elementu.
• Obrezana območja ne sprejemajo klikov ali lebdenja miške, kar je priročno za nepravilne gumbe.