Clip-path generatorius

Kaip naudotis clip-path generatoriumi

1. Pasirink Forma: Daugiakampis, Apskritimas, Elipsė arba Stačiakampis (inset). Blyškus sluoksnis rodo visą elementą, ryškus – tai, kas lieka matoma po apkarpymo.
2. Tempk taškus redaktoriuje. Daugiakampiui kiekvienas taškas yra kampas; spustelėk bet kurioje vietoje, kad pridėtum tašką ant artimiausio krašto. Apskritimui ar elipsei tempk centro ir spindulio taškus. Stačiakampiui (inset) tempk keturis kraštų taškus.
3. Tiksliai sureguliuok žemiau esančiuose laukeliuose: daugiakampiui – sąraše Taškai (X ir Y procentais, su Pašalinti ir Pridėti tašką), kitoms formoms – laukeliuose Spindulys, Centras X, Centras Y, Viršus, Dešinė, Apačia, Kairė ir Suapvalinti kampai (px).
4. Pradėk greičiau su Šablonai: trikampis, trapecija, lygiagretainis, rombas, penkiakampis, šešiakampis, aštuonkampis, nuožulnūs kampai, žvaigždė, kryžius, rodyklės, rodyklės galva, kalbos debesėlis, apskritimas, elipsė ir stačiakampis.
5. Pažymėk Pritraukti prie 5 %, kad reikšmės būtų tvarkingos, ir Pridėti -webkit-clip-path (senas „Safari“), jei vis dar palaikai „Safari“ 13.0 ar senesnę versiją.
6. Jei nori, įmesk nuotrauką į Fono paveikslėlis (nebūtina), kad pamatytum formą ant savo paveikslėlio. Failas niekada neįkeliamas į serverį.
7. Mygtuku Kopijuoti nukopijuok CSS kodas.

Klaviatūra: pasirink tašką, perkelk jį rodyklių klavišais (po 1 % arba po 10 % su Shift) ir spausk Delete, kad pašalintum daugiakampio tašką. Daugiakampis visada turi bent tris taškus.

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

clip-path formų funkcijos

clip-path paslepia viską, kas yra už formos ribų. Elementas išdėstyme išlaiko savo dydį; apkarpomas tik piešimas ir paspaudžiama sritis.

• polygon(x1 y1, x2 y2, …) paeiliui sujungia taškus ir uždaro formą. polygon(50% 0%, 100% 100%, 0% 100%) yra trikampis, nukreiptas aukštyn. Koordinatės skaičiuojamos nuo viršutinio kairiojo elemento kampo.
• circle(r at cx cy): circle(50% at 50% 50%) yra didžiausias elemento centre telpantis apskritimas. Procentinis spindulys skaičiuojamas nuo elemento įstrižainės, padalytos iš √2, todėl jis lygus pločio daliai tik kvadratiniams elementams.
• ellipse(rx ry at cx cy): horizontalus spindulys yra pločio dalis, vertikalus – aukščio dalis.
• inset(top right bottom left round radius) iškerpa stačiakampį viduje nuo kraštų, naudojant tokią pat vienos–keturių reikšmių santrumpą kaip paraštėms, su pasirenkamais suapvalintais kampais.

Šis įrankis rašo procentus, todėl forma keičia dydį kartu su elementu, koks jis bebūtų.

Patarimai gražioms formoms

• Daugiakampio taškų tvarka svarbi: einant aplink kraštą pagal laikrodžio rodyklę (arba prieš ją), išvengiama susikertančių „peteliškės“ formų.
• Formas su vienodu taškų skaičiumi galima animuoti: transition: clip-path 0.4s sklandžiai paverčia šešiakampį kitu šešiakampiu. Naršyklė negali interpoliuoti tarp daugiakampių su skirtingu taškų skaičiumi.
• clip-path taip pat apkarpo box-shadow ir rėmelius. Kad apkirptai formai suteiktum šešėlį, tėviniam elementui nustatyk filter: drop-shadow().
• Apkirptos vietos negauna paspaudimų ar užvedimo, o tai patogu nereguliarios formos mygtukams.