Clip-path ģenerators

Kā lietot clip-path ģeneratoru

1. Izvēlieties Forma: Daudzstūris, Aplis, Elipse vai Taisnstūris (inset). Izbalinātais slānis rāda visu elementu, spilgtais – to, kas pēc apgriešanas paliek redzams.
2. Velciet punktus redaktorā. Daudzstūrim katrs punkts ir stūris; noklikšķiniet jebkur laukumā, lai pievienotu punktu tuvākajā malā. Aplim vai elipsei velciet centru un rādiusa punktus. Taisnstūrim (inset) velciet četrus malu punktus.
3. Precizējiet laukos zemāk: daudzstūrim – saraksts Punkti (X un Y procentos ar Noņemt un Pievienot punktu), citām formām – lauki Rādiuss, Centrs X, Centrs Y, Augša, Labā puse, Apakša, Kreisā puse un Noapaļoti stūri (px).
4. Ātrāk sāciet ar Sagataves: trijstūris, trapece, paralelograms, rombs, piecstūris, sešstūris, astoņstūris, nošķelti stūri, zvaigzne, krusts, bultas, ševrons, runas burbulis, aplis, elipse un inset.
5. Atzīmējiet Piesaistīt pie 5 %, lai vērtības būtu kārtīgas, un Pievienot -webkit-clip-path (vecais Safari), ja joprojām atbalstāt Safari 13.0 vai vecāku.
6. Pēc izvēles ievelciet fotogrāfiju laukā Fona attēls (neobligāts), lai redzētu formu uz sava attēla. Fails netiek augšupielādēts.
7. Ar Kopēt nokopējiet CSS kods.

Tastatūra: fokusējiet punktu, pārvietojiet to ar bulttaustiņiem (1 %, ar Shift – 10 %) un nospiediet Delete, lai noņemtu daudzstūra punktu. Daudzstūrim vienmēr paliek vismaz trīs punkti.

clip-path formu funkcijas

clip-path paslēpj visu ārpus formas. Elements saglabā savu izmēru izkārtojumā; apgriezta tiek tikai zīmēšana un klikšķināmais laukums.

• polygon(x1 y1, x2 y2, …) savieno punktus secībā un noslēdz formu. polygon(50% 0%, 100% 100%, 0% 100%) ir trijstūris ar augšup vērstu virsotni. Koordinātas sākas elementa augšējā kreisajā stūrī.
• circle(r at cx cy): circle(50% at 50% 50%) ir lielākais aplis elementa centrā. Procentu rādiuss ir relatīvs pret elementa diagonāli, dalītu ar √2, tāpēc tas ir platuma daļa tikai kvadrātveida elementiem.
• ellipse(rx ry at cx cy): horizontālais rādiuss ir platuma daļa, vertikālais – augstuma daļa.
• inset(top right bottom left round radius) izgriež taisnstūri iekšpus malām ar to pašu viena līdz četru vērtību saīsinājumu kā atstarpēm un pēc izvēles noapaļotiem stūriem.

Šis rīks raksta procentus, tāpēc forma mērogojas kopā ar elementu neatkarīgi no tā izmēra.

Padomi labām formām

• Daudzstūra punktu secībai ir nozīme: ejot ap malu pulksteņrādītāja virzienā (vai pretēji), tiek izvairīts no krustotām „tauriņa“ formām.
• Divas formas ar vienādu punktu skaitu var animēt: transition: clip-path 0.4s vienmērīgi pārveido vienu sešstūri citā sešstūrī. Pārlūkprogramma nevar interpolēt starp daudzstūriem ar atšķirīgu punktu skaitu.
• clip-path apgriež arī box-shadow un apmales. Lai apgrieztai formai pievienotu ēnu, uzlieciet filter: drop-shadow() vecākelementam.
• Apgrieztie laukumi nesaņem klikšķus vai peles uzvešanu, kas noder neregulāras formas pogām.