CSS Clip-path-generator
Gratis online CSS clip-path-generator. Formgi polygon-, sirkel-, ellipse- og insett-former med flyttbare punkter, forhåndsvisning og CSS-kode med ett klikk.
Hva er clip-path i CSS?
clip-path er en CSS-egenskap som klipper et element etter en grunnform eller bane. Alt utenfor formen skjules, slik at du kan gjøre et rektangulært bilde eller en boks om til en trekant, sirkel, heksagon, skrå banner eller vilken tilpasset polygon som helst uten å redigere bildet.
Hvilke nettlesere støtter clip-path?
Alle moderne nettlesere støtter grunnformfunksjonene denne generatoren bruker: polygon(), circle(), ellipse() og inset(), inkludert Chrome, Edge, Firefox, Safari og Opera. Prefikset -webkit-clip-path er bare nødvendig i svært gamle mobilversjoner av Safari.
Hvordan fungerer polygonmodus?
I polygonmodus viser forhåndsvisningen hvert hjørne som et flyttbart punkt. Dra et punkt for å flytte det, dobbeltklikk på tomme områder for å legge til et nytt, klikk et punkt for å velge det og bruk sletteknappen for å fjerne det. CSS-verdien oppdateres i sanntid med prosentkoordinater.
Hva betyr prosentene i polygon()?
Hvert hjørne skrives som et X Y-par i prosent, målt fra elementets øverste venstre hjørne. Siden verdiene er relative til elementstørrelsen, skalerer formen med elementet og forblir responsiv ved alle skjermbredder.
Hva er forskjellen mellom circle, ellipse og inset?
circle(radius at x y) klipper ut en sirkel med én radius, ellipse(rx ry at x y) tillater ulik horisontal og vertikal radius, og inset(topp høyre bunn venstre) klipper ut et rektangel som trekkes inn fra hver kant. Denne generatoren har skyvere og tallfelt for alle parametre.
Påvirker clip-path oppsettet eller klikk?
clip-path er rent visuelt. Elementet beholder den opprinnelige boksen i oppsettet, så ingenting rundt flyttes. Pekerhendelser som klikk registreres imidlertid bare innenfor det synlige utklippede området, nyttig for knapper i egen form.
Kan jeg animere clip-path?
Ja. Nettlesere kan mykt overgå mellom to clip-path-verdier når formfunksjon og antall punkter stemmer, f.eks. fra stor til liten insett, eller mellom to polygoner med samme antall hjørner. Animer med CSS-egenskapen transition.
Bilder eller data mine lastes opp noe sted?
Nei. Forhåndsvisningsbildet er en gradient tegnet lokalt på et canvas, og alle beregninger skjer i nettleseren din. Ingenting av det du lager sendes til en server, så verktøyet fungerer også frakoblet etter lasting.
Hva er vanlige bruksområder for clip-path?
Populære bruk: skrå hero-seksjoner, sekskantede eller runde avatarmasker, trekantede taleboblepekar, kreative fotocollasjer, fasade kort hjørner og knapper i egen form, alt uten bildebehandlingsprogramvare.
Slik bruker du CSS Clip-path-generator
Form hvilket som helst element med CSS clip-path i stedet for å redigere bilder. Velg en formfunksjon, dra i håndtakene og kopier produksjonsklar CSS. Alt kjøres lokalt i nettleseren din.
- Velg en modus: Polygon, Sirkel, Ellipse eller Inset.
- I Polygon-modus drar du hjørnepunktene, dobbeltklikker på tom plass for å legge til et punkt og merker ett før du sletter det.
- I modusene Sirkel, Ellipse og Inset finjusterer du hver verdi med glidebryterne eller skriver en nøyaktig prosent.
- Se hvordan forhåndsvisningen oppdateres over et lokalt generert gradienteksempelbilde.
- Kopier den énlinjede clip-path-regelen og lim den inn i stilarket ditt.
Hold samme antall polygonpunkter mellom to tilstander, så kan du animere formen mykt med en CSS-overgang.
Relaterte verktøy
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Lag vakre skygger visuelt med justerbar forskyvning, uskarphet, spredning, farge og innfelt. Live forhåndsvisning og umiddelbar kodekopiering.
- CSS-gradientgenerator Lag fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere fargestopp, vinkler og posisjoner. Kopier produksjonsklar CSS-kode umiddelbart.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.
- CSS-forskønner Formater og forskjønn CSS-kode umiddelbart. Konverter minifisert CSS til lesbar kode med tilpassbare alternativer.
- CSS-minifierer Gratis online CSS-minifierer. Komprimer og optimaliser CSS-kode umiddelbart ved å fjerne mellomrom, kommentarer og unødvendige tegn. Reduser filstørrelsen for raskere webytelse.