Gjenerator i clip-path

Si ta përdorësh gjeneratorin e clip-path

1. Zgjidh një Formë: Poligon, Rreth, Elipsë ose Inset. Shtresa e zbehtë tregon të gjithë elementin, ajo e ndritshme tregon çfarë mbetet e dukshme pas prerjes.
2. Zhvendos pikat në redaktor. Për një poligon, çdo pikë është një kulm; kliko kudo në zonë për të shtuar një pikë në skajin më të afërt. Për një rreth ose elipsë, zhvendos qendrën dhe pikat e rrezes. Për një inset, zhvendos katër pikat e skajeve.
3. Rregullo imët në fushat poshtë: lista Pikat (X dhe Y në përqindje, me Hiq dhe Shto pikë) për poligonet, ose fushat Rrezja, Qendra X, Qendra Y, Lart, Djathtas, Poshtë, Majtas dhe Cepa të rrumbullakosur (px) për format e tjera.
4. Nise më shpejt me Gatishmëritë: trekëndësh, trapez, paralelogram, romb, pesëkëndësh, gjashtëkëndësh, tetëkëndësh, cep i prerë, yll, kryq, shigjeta, chevron, ballon bisede, rreth, elipsë dhe inset.
5. Shëno Përshtat në 5 % për vlera të rregullta, dhe Shto -webkit-clip-path (Safari i vjetër) nëse mbështet ende Safari 13.0 ose më të vjetër.
6. Si opsion, lësho një foto te Imazh sfondi (opsional) për ta parë formën mbi imazhin tënd. Skedari nuk ngarkohet asnjëherë.
7. Kopjo Kodin CSS me butonin Kopjo.

Tastierë: fokuso një pikë, lëvize me shigjetat (1 %, ose 10 % me Shift) dhe shtyp Delete për të hequr një pikë të poligonit. Një poligon mban të paktën tri pika.

Funksionet e formave të clip-path

clip-path fsheh gjithçka jashtë një forme. Elementi e ruan madhësinë në faqosje; priten vetëm pikturimi dhe zona e klikueshme.

• polygon(x1 y1, x2 y2, …) i lidh pikat me radhë dhe e mbyll formën. polygon(50% 0%, 100% 100%, 0% 100%) është një trekëndësh që drejtohet lart. Koordinatat fillojnë nga cepi lart-majtas i elementit.
• circle(r at cx cy): circle(50% at 50% 50%) është rrethi më i madh i përqendruar në element. Një rreze në përqindje është në raport me diagonalen e elementit pjesëtuar me √2, prandaj është pjesë e gjerësisë vetëm për elemente katrorë.
• ellipse(rx ry at cx cy): rrezja horizontale është pjesë e gjerësisë, ajo vertikale pjesë e lartësisë.
• inset(top right bottom left round radius) pret një drejtkëndësh brenda skajeve, me të njëjtën shkurtore një-deri-katër vlera si margjinat dhe me cepa të rrumbullakosur opsionalë.

Ky mjet shkruan përqindje, kështu forma shkallëzohet me elementin sado i madh të jetë.

Këshilla për forma të mira

• Radha e pikave të poligonit ka rëndësi: ecja rreth skajit në drejtim orar (ose kundër orar) shmang format e kryqëzuara, si “papion”.
• Dy forma me të njëjtin numër pikash mund të animohen: transition: clip-path 0.4s e shndërron butë një gjashtëkëndësh në një tjetër. Shfletuesi nuk mund të interpolojë mes poligonesh me numër të ndryshëm pikash.
• clip-path pret edhe box-shadow dhe kornizat. Që t’i japësh një forme të prerë një hije, vendos filter: drop-shadow() te një element prind.
• Zonat e prera nuk marrin kliqe e as hover, gjë e dobishme për butona me formë të parregullt.