Generátor CSS clip-path
Bezplatný online generátor CSS clip-path. Navrhujte tvary polygon, circle, ellipse a inset s tažitelnými body, živým náhledem a zkopírováním kódu CSS na jedno kliknutí.
Co je clip-path v CSS?
clip-path je vlastnost CSS, která ořízne prvek podle základního tvaru nebo cesty. Vše mimo tvar je skryto, takže obdélníkový obrázek nebo blok můžete bez úpravy obrázku proměnit v trojúhelník, kruh, šestiúhelník, šikmý banner nebo libovolný vlastní polygon.
Které prohlížeče podporují clip-path?
Všechny moderní prohlížeče podporují základní tvarové funkce používané tímto generátorem: polygon(), circle(), ellipse() a inset(), včetně Chrome, Edge, Firefox, Safari a Opery. Předpona -webkit-clip-path je potřeba jen ve velmi starých mobilních verzích Safari.
Jak funguje režim polygonu?
V režimu polygonu zobrazuje náhled každý vrchol jako tažitelný bod. Přetáhněte bod pro jeho přesunutí, dvojklikem do prázdného místa přidáte nový bod, kliknutím na bod ho vyberete a tlačítkem smazat odstraníte. Hodnota CSS se průběžně aktualizuje procentními souřadnicemi.
Co znamenají procenta v polygon()?
Každý vrchol se zapisuje jako dvojice X Y v procentech, měřená od levého horního rohu prvku. Protože hodnoty jsou relativní k velikosti prvku, tvar se s prvkem škáluje a zůstává responzivní při jakékoli šířce obrazovky.
Jaký je rozdíl mezi circle, ellipse a inset?
circle(poloměr at x y) ořízne kruh s jedním poloměrem, ellipse(rx ry at x y) umožňuje různé vodorovné a svislé poloměry a inset(horní pravý dolní levý) ořízne obdélník zúžený od každé strany. Tento generátor nabízí posuvníky a číselná pole pro všechny parametry.
Ovlivňuje clip-path rozvržení nebo klikání?
clip-path je čistě vizuální. Prvek si v rozvržení zachovává původní rámeček, takže nic kolem se neposune. Události ukazatele jako kliknutí však fungují jen uvnitř viditelné oříznuté oblasti, což se hodí pro tlačítka neobvyklých tvarů.
Lze clip-path animovat?
Ano. Prohlížeče plynule přecházejí mezi dvěma hodnotami clip-path, pokud se shoduje tvarová funkce i počet bodů, například z velkého insetu na menší nebo mezi dvěma polygony se stejným počtem vrcholů. Animujte vlastností CSS transition.
Nahrají se můj obrázek nebo data někam?
Ne. Náhledový obrázek je přechod kreslený lokálně na canvasu a všechny výpočty probíhají ve vašem prohlížeči. Nic z toho, co vytvoříte, se neposílá na server, takže nástroj funguje i offline po načtení.
K čemu se clip-path nejčastěji používá?
Oblíbené použití zahrnuje šikmé hero sekce, šestiúhelníkové nebo kruhové masky avatarů, trojúhelníkové ukazatele bublin, kreativní fotokoláže, zkosené rohy karet a tlačítka netradičních tvarů — vše bez programu na úpravu fotografií.
Jak používat Generátor CSS clip-path
Dejte libovolnému prvku tvar pomocí CSS clip-path, místo abyste upravovali obrázky. Zvolte funkci tvaru, přetahujte úchyty a zkopírujte produkčně připravené CSS. Vše běží lokálně ve vašem prohlížeči.
- Zvolte režim: Polygon, Kružnice, Elipsa nebo Inset.
- V režimu Polygon přetahujte body vrcholů, dvojitým kliknutím do prázdného prostoru přidáte bod, a před smazáním jeden vyberte.
- V režimech Kružnice, Elipsa a Inset doladěte každou hodnotu posuvníky nebo zadejte přesné procento.
- Sledujte, jak se živý náhled aktualizuje nad lokálně vygenerovaným ukázkovým obrázkem s gradientem.
- Zkopírujte jednořádkové pravidlo clip-path a vložte ho do své šablony stylů.
Udržujte stejný počet bodů polygonu ve dvou stavech a tvar pak plynule animujete přechodem CSS.
Související nástroje
- Generátor CSS Box Shadow Bezplatný online generátor CSS box-shadow. Vizuálně vytvářejte krásné stíny s nastavitelným posunem, rozostřením, šířením, barvou a inset. Živý náhled a okamžité kopírování kódu.
- Generátor CSS gradientů Vytvářejte úžasné CSS gradienty vizuálně. Generujte lineární, radiální a kuželové gradienty s více barevnými zastávkami, úhly a pozicemi. Okamžitě zkopírujte produkčně připravený CSS kód.
- Generátor border-radius Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor easing CSS Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
- Generátor text-shadow CSS Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.
- CSS zkrášlovač Formátujte a zkrášlujte CSS kód okamžitě. Převeďte minifikovaný CSS na čitelný kód s přizpůsobitelnými možnostmi.
- CSS Minifikátor Bezplatný online CSS minifikátor. Okamžitě komprimujte a optimalizujte CSS kód odstraněním mezer, komentářů a zbytečných znaků. Zmenšete velikost souboru pro rychlejší výkon webu.