Generátor clip-path

Jak používat generátor clip-path

1. Vyber Tvar: Mnohoúhelník, Kruh, Elipsa nebo Obdélník (inset). Vybledlá vrstva ukazuje celý prvek, jasná vrstva to, co po ořezu zůstane viditelné.
2. Táhni body v editoru. U mnohoúhelníku je každý bod jedním rohem; kliknutím kamkoli do plochy přidáš bod na nejbližší hraně. U kruhu a elipsy táhni střed a body poloměru. U obdélníku (inset) táhni čtyři body na hranách.
3. Doladit můžeš v polích níže: v seznamu Body (X a Y v procentech, s tlačítky Odstranit a Přidat bod) u mnohoúhelníků, nebo v polích Poloměr, Střed X, Střed Y, Nahoře, Vpravo, Dole, Vlevo a Zaoblené rohy (px) u ostatních tvarů.
4. Rychleji začneš s Předvolbami: trojúhelník, lichoběžník, rovnoběžník, kosočtverec, pětiúhelník, šestiúhelník, osmiúhelník, zkosený tvar, hvězda, kříž, šipky, chevron, bublina, kruh, elipsa a inset.
5. Zaškrtni Přichytávat po 5 % pro úhledné hodnoty a Přidat -webkit-clip-path (starý Safari), pokud stále podporuješ Safari 13.0 a starší.
6. Volitelně přetáhni fotku do pole Obrázek na pozadí (volitelné) a uvidíš tvar na svém vlastním obrázku. Soubor se nikdy nenahrává.
7. Kód CSS zkopíruješ tlačítkem Kopírovat.

Klávesnice: vyber bod, přesouvej ho šipkami (o 1 %, se Shiftem o 10 %) a klávesou Delete odstraníš bod mnohoúhelníku. Mnohoúhelník si ponechává nejméně tři body.

Tvoje soubory zůstávají v tvém zařízení: nikdy se nenahrávají.

Tvarové funkce clip-path

clip-path skryje vše mimo tvar. Prvek si v rozložení zachová svou velikost; ořízne se jen vykreslení a plocha, na kterou lze kliknout.

• polygon(x1 y1, x2 y2, …) spojí body v daném pořadí a tvar uzavře. polygon(50% 0%, 100% 100%, 0% 100%) je trojúhelník směřující nahoru. Souřadnice začínají v levém horním rohu prvku.
• circle(r at cx cy): circle(50% at 50% 50%) je největší kruh vystředěný v prvku. Procentuální poloměr se vztahuje k úhlopříčce prvku dělené √2, takže odpovídá podílu šířky jen u čtvercových prvků.
• ellipse(rx ry at cx cy): vodorovný poloměr je podílem šířky, svislý podílem výšky.
• inset(top right bottom left round radius) vyřízne obdélník uvnitř hran se stejným zkráceným zápisem jedné až čtyř hodnot jako u okrajů a s volitelně zaoblenými rohy.

Nástroj zapisuje procenta, takže se tvar škáluje s prvkem bez ohledu na jeho velikost.

Tipy pro dobré tvary

• Na pořadí bodů mnohoúhelníku záleží: když obcházíš okraj po směru nebo proti směru hodinových ručiček, vyhneš se zkříženým tvarům ve stylu „motýlku“.
• Dva tvary se stejným počtem bodů lze animovat: transition: clip-path 0.4s plynule přemění šestiúhelník v jiný šestiúhelník. Mezi polygony s různým počtem bodů prohlížeč interpolovat neumí.
• clip-path ořízne také box-shadow a okraje. Chceš-li ořezanému tvaru dát stín, použij filter: drop-shadow() na rodičovském prvku.
• Oříznuté oblasti nepřijímají kliknutí ani najetí myší, což se hodí pro nepravidelná tlačítka.