Generátor clip-path

Ako používať generátor clip-path

1. Vyber Tvar: Mnohouholník, Kruh, Elipsa alebo Inset. Vyblednutá vrstva zobrazuje celý prvok, jasná ukazuje, čo zostane po orezaní viditeľné.
2. Presúvaj body v editore. Pri mnohouholníku je každý bod rohom; kliknutím kamkoľvek do plochy pridáš bod na najbližšiu hranu. Pri kruhu alebo elipse presúvaj stred a body polomeru. Pri inset presúvaj štyri body na hranách.
3. Doladiť môžeš v poliach nižšie: v zozname Body (X a Y v percentách, s tlačidlami Odstrániť a Pridať bod) pri mnohouholníkoch, alebo v poliach Polomer, Stred X, Stred Y, Hore, Vpravo, Dole, Vľavo a Zaoblené rohy (px) pri ostatných tvaroch.
4. Rýchlejšie začneš s Predvoľbami: trojuholník, lichobežník, rovnobežník, kosoštvorec, päť-, šesť- a osemuholník, skosený tvar, hviezda, kríž, šípky, chevron a bublina, ako aj kruh, elipsa a inset.
5. Zapni Prichytávať na 5 % pre úhľadné hodnoty a Pridať -webkit-clip-path (starý Safari), ak stále podporuješ Safari 13.0 alebo starší.
6. Voliteľne presuň fotografiu do poľa Obrázok na pozadí (voliteľné), aby bolo vidieť tvar na vlastnom obrázku. Súbor sa nikdy nenahráva.
7. Kód CSS skopíruješ tlačidlom Kopírovať.

Klávesnica: aktivuj bod, posúvaj ho šípkami (o 1 %, so Shiftom o 10 %) a klávesom Delete odstráň bod mnohouholníka. Mnohouholník si ponechá aspoň tri body.

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Tvarové funkcie clip-path

clip-path skryje všetko mimo tvaru. Prvok si v rozložení ponechá svoju veľkosť; orezané je len vykresľovanie a klikateľná plocha.

• polygon(x1 y1, x2 y2, …) spojí body v poradí a uzavrie tvar. polygon(50% 0%, 100% 100%, 0% 100%) je trojuholník smerujúci nahor. Súradnice začínajú v ľavom hornom rohu prvku.
• circle(r at cx cy): circle(50% at 50% 50%) je najväčší kruh vycentrovaný v prvku. Percentuálny polomer sa vzťahuje na uhlopriečku prvku delenú √2, takže sa rovná podielu šírky len pri štvorcových prvkoch.
• ellipse(rx ry at cx cy): vodorovný polomer je podielom šírky, zvislý podielom výšky.
• inset(top right bottom left round radius) vyreže obdĺžnik vo vnútri okrajov, s rovnakým skráteným zápisom jednej až štyroch hodnôt ako pri okrajoch a s voliteľnými zaoblenými rohmi.

Tento nástroj zapisuje percentá, takže sa tvar mení spolu s prvkom bez ohľadu na jeho veľkosť.

Tipy pre dobré tvary

• Na poradí bodov mnohouholníka záleží: ak obchádzaš hranu v smere alebo proti smeru hodinových ručičiek, vyhneš sa skríženým tvarom „motýlika“.
• Dva tvary s rovnakým počtom bodov sa dajú animovať: transition: clip-path 0.4s plynulo premení šesťuholník na iný šesťuholník. Medzi mnohouholníkmi s rôznym počtom bodov prehliadač interpolovať nevie.
• clip-path orezáva aj box-shadow a okraje. Ak chceš orezanému tvaru dať tieň, použi filter: drop-shadow() na rodičovskom prvku.
• Orezané oblasti neprijímajú kliknutia ani prechod myšou, čo sa hodí pri nepravidelných tlačidlách.