CSS Clip-path-generator
Gratis online CSS clip-path-generator. Design polygon-, cirkel-, ellipse- og inset-former med trkbare punkter, live forhåndsvisning og CSS-kode med ét klik.
Hvad er clip-path i CSS?
clip-path er en CSS-egenskab, der klipper et element efter en grundform eller bane. Alt uden for formen skjules, så du kan forvandle et rektangulært billede eller en boks til en trekant, cirkel, sekskant, skrå banner eller vilkårlig tilpasset polygon uden at redigere billedet.
Hvilke browsere understøtter clip-path?
Alle moderne browsere understøtter de grundformfunktioner, denne generator bruger: polygon(), circle(), ellipse() og inset(), herunder Chrome, Edge, Firefox, Safari og Opera. Præfikset -webkit-clip-path er kun nødvendigt i meget gamle mobile Safari-versioner.
Hvordan fungerer polygon-tilstanden?
I polygon-tilstand viser forhåndsvisningen hvert hjørne som et trkbart punkt. Træk et punkt for at flytte det, dobbeltklik på tomt område for at tilføje et nyt, klik på et punkt for at vælge det og brug slet-knappen til at fjerne det. CSS-værdien opdateres i realtid med procentkoordinater.
Hvad betyder procenterne i polygon()?
Hvert hjørne skrives som et X Y-par i procent, målt fra elementets øverste venstre hjørne. Da værdierne er relative til elementstørrelsen, skalerer formen med elementet og forbliver responsiv ved enhver skærmbredde.
Hvad er forskellen på circle, ellipse og inset?
circle(radius at x y) klipper en cirkel med én radius, ellipse(rx ry at x y) tillader forskellig vandret og lodret radius, og inset(top højre bund venstre) klipper et rektangel, der trækkes ind fra hver kant. Denne generator har skydere og talinput til alle parametre.
Påvirker clip-path layoutet eller klik?
clip-path er rent visuelt. Elementet beholder sin oprindelige boks i layoutet, så intet omkring flyttes. Pegehændelser som klik registreres dog kun inden for det synlige klippede område, hvilket er praktisk til knapper i egen form.
Kan jeg animere clip-path?
Ja. Browsere kan blødt skifte mellem to clip-path-værdier, når formfunktionen og antallet af punkter matcher, fx fra stor til lille inset eller mellem to polygoner med samme antal hjørner. Animér med CSS-egenskaben transition.
Bliver mit billede eller data uploadet?
Nej. Forhåndsvisningsbilledet er en gradient tegnet lokalt på et canvas, og alle beregninger sker i din browser. Intet af det, du designer, sendes til en server, så værktøjet virker også offline efter indlæsning.
Hvad er typiske anvendelser af clip-path?
Populære anvendelser er skrå hero-sektioner, sekskantede eller runde avatarmasker, trekantede taleboble-pegepinde, kreative fotocollager, facetterede hjørner og knapper i egen form, alt uden billedredigeringssoftware.
Sådan bruges CSS Clip-path-generator
Formgiv ethvert element med CSS clip-path i stedet for at redigere billeder. Vælg en formfunktion, træk i håndtagene og kopiér produktionsklar CSS. Alt kører lokalt i din browser.
- Vælg en tilstand: Polygon, Cirkel, Ellipse eller Inset.
- Træk i Polygon-tilstand hjørnepunkterne, dobbeltklik på tomt område for at tilføje et punkt, og markér ét, før du sletter det.
- I tilstandene Cirkel, Ellipse og Inset finjusterer du hver værdi med skyderne eller skriver en nøjagtig procent.
- Se, hvordan live-forhåndsvisningen opdateres over et lokalt genereret gradienteksempelbillede.
- Kopiér den ét-linjers clip-path-regel og indsæt den i dit stylesheet.
Hold samme antal polygonpunkter mellem to tilstande, så kan du animere formen blødt med en CSS-transition.
Relaterede værktøjer
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Opret smukke skygger visuelt med justerbar forskydning, sløring, spredning, farve og indsat. Live forhåndsvisning og øjeblikkelig kodekopiering.
- CSS-gradientgenerator Opret fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere farvestop, vinkler og positioner. Kopier produktionsklar CSS-kode øjeblikkeligt.
- Border-radius Generator Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Easing-generator Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.
- CSS-forskønner Formatér og forskøn CSS-kode øjeblikkeligt. Konverter minifieret CSS til læsbar kode med justerbare muligheder.
- CSS-minifierer Gratis online CSS-minifierer. Komprimer og optimer CSS-kode øjeblikkeligt ved at fjerne mellemrum, kommentarer og unødvendige tegn. Reducer filstørrelsen for hurtigere web-ydelse.