CSS clip-path generaattori
Ilmainen online CSS clip-path generaattori. Suunnittele polygon-, circle-, ellipse- ja inset-muodot raahattavilla pisteillä, live-esikatselulla ja CSS-koodin kopioinnilla yhdellä klikkauksella.
Mitä on clip-path CSS:ssä?
clip-path on CSS-ominaisuus, joka rajaa elementin perusmuotoon tai polkuun. Kaikki muodon ulkopuolinen piilotetaan, joten suorakulmaisen kuvan tai laatikon voi muuttaa kolmioksi, ympyräksi, kuusikulmioksi, viistäksi banneriksi tai halutuksi monikulmioksi muokkaamatta itse kuvaa.
Mitkä selaimet tukevat clip-pathia?
Kaikki nykyaikaiset selaimet tukevat tämän generaattorin käyttämiä perusmuotofunktioita: polygon(), circle(), ellipse() ja inset(), mukaan lukien Chrome, Edge, Firefox, Safari ja Opera. Etuliite -webkit-clip-path tarvitaan vain hyvin vanhoissa Safari-mobiiliversioissa.
Miten polygon-tila toimii?
Polygon-tilassa esikatselu näyttää jokaisen kärkipisteen raahattavana pisteitä. Raahaa pistettä siirtääksesi sitä, kaksoisnapsauta tyhjää aluetta lisätäksesi uuden, napsauta pistettä valitaksesi sen ja poista se poistopainikkeella. CSS-arvo päivittyy reaaliajassa prosenttikoordinaateilla.
Mitä prosentit polygon()-funktiossa tarkoittavat?
Jokainen kärkipiste kirjoitetaan X Y -prosenttiparina, mitattuna elementin vasemmasta yläkulmasta. Koska arvot ovat suhteessa elementin kokoon, muoto skaalautuu sen mukana ja pysyy responsiivisena kaikilla näytönleveyksillä.
Mitä eroa on circle-, ellipse- ja inset-muodoilla?
circle(säde at x y) rajaa ympyrän yhdellä säteellä, ellipse(rx ry at x y) sallii eri vaaka- ja pystysäteen, ja inset(ylhään oikealle alas vasemmalle) rajaa suorakulmion, joka kutistuu jokaiselta reunaltansa. Tämä generaattori tarjoaa liukusäätimet ja lukukentät kaikkiin parametreihin.
Vaikuttaako clip-path asetteluun tai klikkauksiin?
clip-path on puhtaasti visuaalinen. Elementti säilyttää alkuperäisen laatikkonsa asettelussa, joten mikään ympärillä ei siirry. Osoitintapahtumat kuten klikkaukset toimivat kuitenkin vain näkyvällä rajatulla alueella, mikä sopii omamuotoisiin painikkeisiin.
Voinko animoida clip-pathin?
Kyllä. Selaimet siirtyvät pehmeästi kahden clip-path-arvon välillä, kun muotofunktio ja pistemäärä täsmäävät, esimerkiksi suuresta insetistä pienempään tai kahden saman pistemäärän polygonin välillä. Animoi CSS-transition-ominaisuudella.
Ladataanko kuva tai tietoni palvelimelle?
Ei. Esikatselukuva on canvasille paikallisesti piirretty liukuväri, ja kaikki laskenta tapahtuu selaimessasi. Mitään ei lähetetä palvelimelle, joten työkalu toimii myös offline-tilassa lataamisen jälkeen.
Yleisiä käyttötarkoituksia clip-pathille?
Suosittuja käyttöjä ovat viistot hero-osiot, kuusikulmaiset tai pyöreät avataripeitteet, kolmionmuotoiset puhekuplan osoittimet, luovat kuvakollaasit, korteille katkaistut kulmat ja omamuotoiset painikkeet, kaikki ilman kuvankäsittelyohjelmia.
Näin käytät työkalua CSS clip-path generaattori
Muotoile mikä tahansa elementti CSS clip-path -ominaisuudella kuvien muokkaamisen sijaan. Valitse muotofunktio, vedä kahvoista ja kopioi tuotantovalmis CSS. Kaikki toimii paikallisesti selaimessasi.
- Valitse tila: Monikulmio, Ympyrä, Ellipsi tai Inset.
- Vedä Monikulmio-tilassa kärkipisteitä, lisää pistettä kaksoisnapsauttamalla tyhjää aluetta ja valitse yksi ennen sen poistamista.
- Ympyrä-, Ellipsi- ja Inset-tiloissa hienosäädä arvoja liukusäätimillä tai kirjoita tarkka prosenttiluku.
- Katso, kuinka reaaliaikainen esikatselu päivittyy paikallisesti luodun liukuvärimallikuvan päällä.
- Kopioi yksirivinen clip-path-sääntö ja liitä se tyylisivullesi.
Pidä monikulmion pisteiden määrä samana kahden tilan välillä, niin voit animoida muodon sujuvasti CSS-siirtymällä.
Aiheeseen liittyvät työkalut
- CSS Box Shadow Generaattori Ilmainen online CSS box-shadow generaattori. Luo kauniita varjoja visuaalisesti säädettävällä siirtymällä, sumennuksella, leviämisellä, värillä ja insetillä. Live-esikatselu ja välitön koodin kopiointi.
- CSS-liukuvärigeneraattori Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS easing generaattori Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
- CSS tekstivarjo generaattori Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.
- CSS-kaunistaja Muotoile ja kaunista CSS-koodi välittömästi. Muunna minifioitu CSS luettavaksi koodiksi muokattavilla vaihtoehdoilla.
- CSS-minifioija Ilmainen online CSS-minifioija. Pakkaa ja optimoi CSS-koodi välittömästi poistamalla välilyönnit, kommentit ja tarpeettomat merkit. Pienennä tiedostokokoa nopeampaa web-suorituskykyä varten.