Clip-path-generaattori

Näin käytät clip-path-generaattoria

1. Valitse Muoto: Monikulmio, Ympyrä, Ellipsi tai Suorakulmio. Himmeä taso näyttää koko elementin ja kirkas sen, mikä jää näkyviin rajauksen jälkeen.
2. Vedä editorin pisteitä. Monikulmiossa jokainen piste on kulma, ja napsauttamalla mitä tahansa kohtaa alueella lisäät pisteen lähimmälle reunalle. Ympyrässä ja ellipsissä vedä keskipistettä ja sädepisteitä. Suorakulmiossa vedä neljää reunapistettä.
3. Hienosäädä alla olevilla kentillä: monikulmioille Pisteet-luettelolla (X ja Y prosentteina, painikkeet Poista ja Lisää piste) tai muille muodoille kentillä Säde, Keskipiste X, Keskipiste Y, Ylä, Oikea, Ala, Vasen ja Pyöristetyt kulmat (px).
4. Pääset alkuun nopeammin Esiasetukset-kohdan avulla: kolmio, puolisuunnikas, suunnikas, vinoneliö, viisikulmio, kuusikulmio, kahdeksankulmio, viiste, tähti, risti, nuolet, kulmanuoli, puhekupla, ympyrä, ellipsi ja suorakulmio.
5. Valitse Kohdista 5 %:n välein siistejä arvoja varten ja Lisää -webkit-clip-path (vanha Safari), jos tuet vielä Safarin versiota 13.0 tai vanhempaa.
6. Voit halutessasi pudottaa valokuvan kohtaan Taustakuva (valinnainen) nähdäksesi muodon omalla kuvallasi. Tiedostoa ei koskaan lähetetä minnekään.
7. Kopioi CSS-koodi painikkeella Kopioi.

Näppäimistö: kohdista piste, siirrä sitä nuolinäppäimillä (1 % tai Shiftillä 10 %) ja poista monikulmion piste Delete-näppäimellä. Monikulmiossa säilyy aina vähintään kolme pistettä.

clip-path-ominaisuuden muotofunktiot

clip-path piilottaa kaiken muodon ulkopuolella. Elementti säilyttää kokonsa asettelussa; vain maalaus ja napsautettava alue rajautuvat.

• polygon(x1 y1, x2 y2, …) yhdistää pisteet järjestyksessä ja sulkee muodon. polygon(50% 0%, 100% 100%, 0% 100%) on ylöspäin osoittava kolmio. Koordinaatit alkavat elementin vasemmasta yläkulmasta.
• circle(r at cx cy): circle(50% at 50% 50%) on suurin elementin keskelle sijoitettu ympyrä. Prosenttimuotoinen säde on suhteessa elementin lävistäjään jaettuna luvulla √2, joten se vastaa leveyden osuutta vain neliömäisillä elementeillä.
• ellipse(rx ry at cx cy): vaakasuora säde on osuus leveydestä ja pystysuora osuus korkeudesta.
• inset(top right bottom left round radius) leikkaa suorakulmion reunojen sisäpuolelle. Siinä on sama yhdestä neljään arvon lyhennysmerkintä kuin marginaaleissa, ja kulmat voi pyöristää.

Tämä työkalu kirjoittaa prosentteja, joten muoto skaalautuu elementin mukana sen koosta riippumatta.

Vinkkejä hyviin muotoihin

• Monikulmion pisteiden järjestyksellä on väliä: reunaa pitkin kiertäminen myötä- tai vastapäivään välttää ristikkäiset, rusettimaiset muodot.
• Kaksi muotoa, joissa on yhtä monta pistettä, voi animoida: transition: clip-path 0.4s muuttaa kuusikulmion pehmeästi toiseksi kuusikulmioksi. Selain ei voi interpoloida monikulmioiden välillä, joilla on eri määrä pisteitä.
• clip-path rajaa myös box-shadow-varjon ja reunaviivat. Jos rajatulle muodolle haluaa varjon, aseta filter: drop-shadow() vanhempielementille.
• Rajatut alueet eivät vastaanota napsautuksia tai hiiren osoitusta, mikä on kätevää epäsäännöllisissä painikkeissa.