CSS clip-path generátor
Ingyenes online CSS clip-path generátor. Tervezzen polygon, circle, ellipse és inset alakzatokat húzható pontokkal, élő előnézettel és egy kattintásos CSS-kód másolással.
Mi az a clip-path a CSS-ben?
A clip-path egy CSS-tulajdonság, amely egy elemet alapalakzatra vagy útvonalra vág. A alakzaton kívüli minden elrejtődik, így a téglalap alakú képet vagy dobozt szerkesztés nélkül háromszöggé, körré, hatszöggé, döntő bannerré vagy tetszőleges sokszöggé alakíthatja.
Mely böngészők támogatják a clip-path-ot?
Minden modern böngésző támogatja a generátor által használt alapalak-függvényeket: polygon(), circle(), ellipse() és inset(), ideértve a Chrome, Edge, Firefox, Safari és Opera böngészőket. A -webkit-clip-path előtag csak nagyon régi mobil Safari verziókban szükséges.
Hogyan működik a polygon mód?
Polygon módban az előnézet minden csúcsot húzható pontként jelenít meg. Húzza el a pontot az áthelyezéshez, kattintson duplán az üres területre az új pont beszúrásához, kattintson egy pontra a kijelöléshez, majd a törlés gombbal távolítsa el. A CSS-érték százalékos koordinátákkal valós időben frissül.
Mit jelenten a százalékok a polygon()-ban?
Minden csúcs X Y százalékpárként íródik, az elem bal felső sarkától mérve. Mivel az értékek az elem méretéhez viszonyulnak, az alakzat együtt skálázódik és minden képernyőszélességnél reszponzív marad.
Mi a különbség a circle, ellipse és inset között?
A circle(sugár at x y) egyetlen sugarú kört vág, az ellipse(rx ry at x y) különböző vízszintes és függőleges sugarakat enged, az inset(felső jobb alsó bal) pedig minden élől befelé szűkített téglalapot vág. Ez a generátor minden paraméterhez csúszkát és számbeviteli mezőt ad.
Befolyásolja a clip-path az elrendezést vagy a kattintásokat?
A clip-path tisztán vizuális. Az elem megtartja eredeti dobozát az elrendezésben, így körülötte semmi nem mozdul. Az olyan mutatóesemények viszont, mint a kattintás, csak a látható kivágott területen belül működnek — ez egyedi alakú gombokhoz hasznos.
Animálható a clip-path?
Igen. A böngészők gördülékenyen váltanak két clip-path érték között, ha az alakfüggvény és a pontszám egyezik, például nagy insetről kicsire, vagy azonos csúcsszámú sokszögek között. Animálja a CSS transition tulajdonsággal.
Feltöltődik a képem vagy adataim?
Nem. Az előnézeti kép egy canvasra helyben rajzolt színátmenet, minden számítás a böngészőjében történik. Semmi nem kerül szerverre, ezért az eszköz betöltés után offline is működik.
Melyek a clip-path tipikus felhasználásai?
Népszerű felhasználások: döntött hero szekciók, hatszög vagy kör alakú avatar-maszkok, háromszög beszédbuborék-csúcsok, kreatív fotókollázsok, levágott kártyasarkok és egyedi alakú gombok — képszerkesztő szoftver nélkül.
A(z) CSS clip-path generátor használata
Formáljon meg bármely elemet CSS clip-path segítségével képszerkesztés helyett. Válasszon alakfüggvényt, húzza meg a fogantyúkat, és másolja ki a készre szerelt CSS-t. Minden helyben fut a böngészőjében.
- Válasszon módot: Sokszög, Kör, Ellipszis vagy Inset.
- Sokszög módban húzza a csúcspontokat, üres területre kattintva duplán pontot adhat hozzá, és törlés előtt jelöljön ki egyet.
- Kör, Ellipszis és Inset módban csiszolja finoman a csúszkákkal az értékeket, vagy írjon be pontos százalékot.
- Figyelje, hogyan frissül az élő előnézet a helyben előállított átmenetes mintakép felett.
- Másolja ki az egysoros clip-path szabályt, és illessze be a stíluslapjába.
Tartsa meg a sokszög pontjainak számát két állapot között, és a formát CSS-transzícióval gördülékenyen animálhatja.
Kapcsolódó eszközök
- CSS Box Shadow Generátor Ingyenes online CSS box-shadow generátor. Vizuálisan hozzon létre gyönyörű árnyékokat állítható eltolással, elhomályosítással, kiterjedéssel, színnel és betéttel. Élő előnézet és azonnali kód másolás.
- CSS Színátmenet Generátor Hozzon létre lenyűgöző CSS színátmeneteket vizuálisan. Lineáris, radiális és kúp színátmeneteket generálhat több színállomással, szögekkel és pozíciókkal. Azonnal másolhatja a gyártásra kész CSS kódot.
- Border-radius Generátor Ingyenes kreatív border-radius generátor online. Húzza meg a 8 fogantyút vagy válasszon blob alakot, hogy organikus CSS formákat készítsen, és azonnal másolja a kódot.
- Színkonverter Ingyenes online színkonverter. Azonnal konvertálja a HEX, RGB, HSL, HSV formátumokat vizuális választóval. 100% privát, böngészőjében fut.
- CSS easing generátor Ingyenes online CSS easing generátor. Húzza a cubic-bezier kontrollpontokat az interaktív görbén, válasszon 18 előbeállítás közül, nézze meg a hurkoló labda-animációt, és azonnal másolja az időzítő függvényt.
- CSS szövegárnyék generátor Ingyenes online text-shadow generátor. Halmozz több árnyékréteget eltolással, homályosítással, színnel és átlátszatlansággal, próbáld ki a Neon, 3D, Retro előbeállításokat, és azonnal másold a CSS-t.
- CSS szépítő CSS kód azonnali formázása és szépítése. Minimalizált CSS átalakítása olvasható kóddá testreszabható beállításokkal.
- CSS Minimalizáló Ingyenes online CSS minimalizáló. Azonnal tömörítse és optimalizálja CSS kódját a szóközök, megjegyzések és felesleges karakterek eltávolításával. Csökkentse a fájlméretet a gyorsabb webteljesítményért.