Ġeneratur tal-clip-path

Kif tuża l-ġeneratur tal-clip-path

1. Agħżel Forma: Poligonu, Ċirku, Ellissi jew Inset. Is-saff imċajpar juri l-element kollu, dak ċar juri dak li jibqa’ viżibbli wara l-qtugħ.
2. Kaxkar il-punti fl-editur. Għal poligonu, kull punt huwa rokna; ikklikkja kullimkien fiż-żona biex iżżid punt fuq l-eqreb tarf. Għal ċirku jew ellissi, kaxkar iċ-ċentru u l-punti tar-raġġ. Għal inset, kaxkar l-erba’ punti tat-truf.
3. Irfina fl-oqsma ta’ taħt: il-lista Punti (X u Y f’perċentwal, b’Neħħi u Żid punt) għall-poligoni, jew l-oqsma Raġġ, Ċentru X, Ċentru Y, Fuq, Lemin, Isfel, Xellug u Rkejjen tondi (px) għall-forom l-oħra.
4. Ibda iktar malajr bil-Preset: trijangolu, trapezju, parallelogramma, rombu, pentagonu, eżagonu, ottagonu, bevel, stilla, salib, vleġeġ, chevron, bużżieqa tad-diskors, ċirku, ellissi u inset.
5. Agħżel Aġġusta għal 5 % għal valuri sodi, u Żid -webkit-clip-path (Safari qadim) jekk għadek tappoġġja Safari 13.0 jew iktar qadim.
6. Jekk trid, waqqa’ ritratt f’Immaġni tal-isfond (mhux obbligatorju) biex tara l-forma fuq l-immaġni tiegħek. Il-fajl qatt ma jittella’.
7. Ikkopja l-Kodiċi CSS b’Ikkopja.

Keyboard: iffoka punt, ċaqlqu miċ-ċwievet tal-vleġġa (1 %, jew 10 % b’Shift) u agħfas Delete biex tneħħi punt tal-poligonu. Poligonu jżomm tliet punti mill-inqas.

Il-funzjonijiet tal-forma tal-clip-path

clip-path jaħbi dak kollu li jinsab barra minn forma. L-element iżomm id-daqs tiegħu fit-tqassim; biss it-tpinġija u ż-żona li tista’ tiġi kklikkjata jiġu maqtugħin.

• polygon(x1 y1, x2 y2, …) jgħaqqad il-punti bl-ordni u jagħlaq il-forma. polygon(50% 0%, 100% 100%, 0% 100%) huwa trijangolu li jipponta ’l fuq. Il-koordinati jibdew mir-rokna ta’ fuq xellug tal-element.
• circle(r at cx cy): circle(50% at 50% 50%) huwa l-akbar ċirku ċċentrat fl-element. Raġġ f’perċentwal huwa relattiv għad-dijagonali tal-element maqsuma b’√2, allura jaqbel ma’ sehem tal-wisa’ biss f’elementi kwadri.
• ellipse(rx ry at cx cy): ir-raġġ orizzontali huwa sehem tal-wisa’, dak vertikali sehem tal-għoli.
• inset(top right bottom left round radius) jaqta’ rettangolu ġewwa t-truf, bl-istess shorthand ta’ minn wieħed sa erba’ valuri bħall-margins u rkejjen tondi mhux obbligatorji.

Din l-għodda tikteb perċentwali, allura l-forma tiskala mal-element ikun kemm ikun kbir.

Pariri għal forom tajbin

• L-ordni tal-punti tal-poligonu hija importanti: jekk iduru mat-tarf bl-ordni (fid-direzzjoni tal-arloġġ jew kontra tiegħu) tevita forom maqsuma jew “bow-tie”.
• Żewġ forom bl-istess numru ta’ punti jistgħu jiġu animati: transition: clip-path 0.4s jibdel eżagonu f’ieħor bla xkiel. Il-brawżer ma jistax jinterpola bejn poligoni b’numru differenti ta’ punti.
• clip-path jaqta’ wkoll box-shadow u borders. Biex tagħti dell lil forma maqtugħa, poġġi filter: drop-shadow() fuq element parent.
• Iż-żoni maqtugħin ma jirċevux klikks jew hovers, u dan huwa utli għal buttuni b’forma irregolari.