CSS Clip-Path knippadgenerator

Genereer visueel CSS clip-path-code voor uitsnijdpaden, ondersteunt vormen zoals polygonen, cirkels en ellipsen, en kan afbeeldingen batchgewijs verwerken

Bug melden

Browseruitvoermodus: Je gegevens worden in je browser verwerkt en niet naar de server geüpload.

Snelheid en stabiliteit: De verwerkingssnelheid hangt af van je apparaat en browser. Voor grote batchtaken kan de desktopversie stabieler zijn.

Tool wordt geladen, even geduld...

Als de online tool niet kan laden of uitvoeren, probeer dan de desktoptool. https://tools.yikeaigc.com/

Toolgebruik

Terug naar oude versie

Stel eerst het bijsnijpad in, kopieer daarna de code of verwerk afbeeldingen batchgewijs

Na het kiezen van een vorm kun je polygoonpunten verslepen, of overschakelen naar cirkel, ellips of inset en parameters aanpassen. Batchverwerking gebruikt het huidige pad. Bij meerdere uploads worden alleen de eerste 20 getoond, maar alles wordt verwerkt.

Huidige padinfo

Typepolygon

Controlepunten3

Tip: stel eerst het pad in, kopieer daarna de code of verwerk afbeeldingen.

Live voorbeeld In polygoonmodus kun je blauwe controlepunten slepen; coördinaten genereren automatisch CSS.

Coördinaten: relatief aan het element, linksboven is 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Vorm en presets Kies eerst type, pas dan parameters aan

Vormtype

Vooraf ingestelde categorie

Padparameters Waarden ondersteunen procenten

Coördinaattekst

Straal

Centrum X

Centrum Y

Horizontale radius

Verticale radius

Centrum X

Centrum Y

Rechts

onder

Links

Afgeronde hoeken

Voorbeeld en uitvoer Achtergrond beïnvloedt alleen voorbeeld en afbeeldingsexport

Voorbeeldbreedte (px)

Voorbeeldhoogte (px)

Kleur A

Kleur B

Gradienthoek

Voorbeeldafbeelding

Elementranden tonen Inclusief -webkit-prefix Klasseselector genereren

Code genereren

Code wordt live bijgewerkt met de instellingen.

Huidig pad in batch toepassen Stel eerst in de vorige stap het pad in en kies daarna beeldverwerking.

Klik of sleep afbeeldingen hierheen Ondersteunt gangbare formaten zoals JPG, PNG, WebP, GIF, BMP

Nog geen afbeeldingen geselecteerd.

Uitvoerinstellingen PNG ondersteunt transparante achtergrond

Uitvoerformaat

Afmetingsmodus

Max. lange zijde (px)

Aangepaste breedte (px)

Aangepaste hoogte (px)

Uitvoerkwaliteit92%

Buiten uitsnede transparant Huidig pad gebruiken

Wacht op verwerking.

Afbeeldingsvoorbeeld en resultaat Na upload worden de eerste 20 getoond; alle bestanden worden verwerkt.

Afbeeldingen in wachtrij0 afbeeldingen

Selecteer afbeeldingen om miniaturen te zien.

Verwerkingsresultaat0 afbeeldingen

Resultaatminiaturen verschijnen na verwerking.

Instructies

Gebruiksinstructies

Knippad ontwerpen:Ga na het openen van de tool eerst naar de stap “Pad ontwerpen” en kies een vormtype: veelhoek, cirkel, ellips of inset-rechthoek.
Vooraf ingestelde vorm kiezen:Kies een preset uit basisvormen, pijlen en pictogrammen of decoratieve vormen en pas daarna de parameters naar wens aan.
Padparameters bewerken:Bij een veelhoek kun je controlepunten verslepen of percentagecoördinaten invoeren in het coördinatentekstvak; bij cirkels, ellipsen en inset-rechthoeken kun je radius, middelpunt, marges en afgeronde hoeken direct invullen.
Voorvertoning instellen:Pas de breedte en hoogte van de voorvertoning, verloopkleuren en verloophoek aan, of kies een afbeelding als voorbeeldinhoud.
CSS-code kopiëren:Klik na controle van het resultaat op “clip-path kopiëren” of “CSS kopiëren” en kies of je het -webkit-voorvoegsel en de klasse-selector wilt opnemen.
Afbeeldingen batchgewijs verwerken:Klik op “Volgende: batchverwerking”, selecteer meerdere afbeeldingen, stel uitvoerformaat, kwaliteit en formaatmodus in en start de verwerking.
Resultaten downloaden:Klik na voltooiing op “Alle resultaten als ZIP downloaden”. De uitvoerbestanden behouden zoveel mogelijk de oorspronkelijke bestandsnaam; bij dubbele namen wordt automatisch een nummer toegevoegd.

Veelgestelde vragen

Antwoord: clip-path wordt gebruikt om elementen in een opgegeven vorm bij te snijden. Het wordt vaak gebruikt voor creatieve afbeeldingsweergaven, kaart-randen, knopvormen, decoratieve webgraphics en interactieve effecten.

Antwoord: polygon maakt een veelhoek op basis van meerdere coördinatenpunten; circle maakt een cirkelvormig knipgebied; ellipse maakt een ellipsvormig knipgebied; inset maakt een inset-rechthoek en ondersteunt parameters voor afgeronde hoeken.

Antwoord: Coördinaten worden als percentages weergegeven. Bijvoorbeeld: 50% 0% staat voor het midden van de bovenrand van het element, en 100% 100% voor de rechteronderhoek. Scheid punten met komma’s; er zijn minimaal 3 punten nodig.

Antwoord: -webkit-clip-path wordt gebruikt voor compatibiliteit met sommige WebKit-omgevingen. Voor een bredere ondersteuning kun je zowel de prefixed als de standaardnotatie behouden.

Antwoord: Je kunt gangbare afbeeldingsformaten als invoer selecteren; uitvoer wordt ondersteund in PNG, JPEG en WebP. PNG is geschikt om transparante gebieden te behouden, JPEG is geschikt voor kleinere bestanden en WebP biedt een goede balans tussen bestandsgrootte en beeldkwaliteit.

Antwoord: De tool probeert de oorspronkelijke bestandsnaam zoveel mogelijk te behouden en vervangt de extensie op basis van het uitvoerformaat. Als er bestanden met dezelfde naam bestaan, wordt er een nummer aan de bestandsnaam toegevoegd om te voorkomen dat resultaten elkaar overschrijven.