Ġeneratur tal-border-radius

Kif tuża l-ġeneratur tal-border-radius

1. Kaxkar il-punti fuq it-truf tal-previżjoni. Kull punt ikkulurit jissettja r-raġġ orizzontali ta’ rokna; meta tagħżel Rkejjen ellittiċi (8 valuri), il-punti bojod jissettjaw ir-raġġi vertikali.
2. Jew ikteb valuri eżatti f’Rkejjen: Fuq xellug, Fuq lemin, Isfel lemin u Isfel xellug, kull wieħed b’qasam Orizzontali u wieħed Vertikali.
3. Agħżel l-Unità: % (perċentwal tal-kaxxa) jew px (pikseli). It-tibdil jikkonverti l-valuri preżenti, allura l-forma tibqa’ l-istess.
4. Issettja Wisa’ tal-kaxxa (px) u Għoli tal-kaxxa (px) biex jaqblu mal-element tiegħek, u uża L-irkejjen kollha biex iddawwar kull rokna f’daqqa.
5. Ipprova l-Preset (Tondjat, Pillola, Ċirku, Werqa, Qatra, Bajda, Biljett u tliet blobs) jew ikklikkja Blob każwali għal forma organika.
6. Agħżel Proprjetajiet separati jekk tippreferi l-erba’ dikjarazzjonijiet border-*-radius, imbagħad ikkopja l-Kodiċi CSS b’Ikkopja.

Keyboard: iffoka punt u agħfas iċ-ċwievet tal-vleġġa biex tbiddel ir-raġġ tiegħu b’pass wieħed (10 b’Shift).

Din l-għodda taħdem fil-brawżer tiegħek: xejn minn dak li tikteb ma jintbagħat lil server.

Is-sintassi tal-border-radius

border-radius jieħu minn wieħed sa erba’ valuri, bl-ordni fuq xellug, fuq lemin, isfel lemin, isfel xellug. Bħal fil-margins, il-valuri neqsin jinkopjaw mir-rokna opposta: border-radius: 10px 20px iddawwar l-irkejjen fuq xellug u isfel lemin b’10px, u l-bqija b’20px. L-għodda dejjem tikteb l-iqsar forma ekwivalenti.

Kull rokna fil-fatt hija kwart ta’ ellissi b’żewġ raġġi. Slash jifred ir-raġġi orizzontali mill-vertikali, u dan jagħti sa tmien valuri:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Qabel is-slash: ir-raġġi orizzontali tal-erba’ rkejjen. Warajh: ir-raġġi vertikali. Meta ż-żewġ listi jkunu ugwali, il-parti tas-slash titneħħa.

Pikseli jew perċentwali?

• px jagħti l-istess kurva kemm ikun kbir l-element. Hija l-għażla t-tajba għal buttuni, kards u inputs: border-radius: 8px.
• % huwa relattiv għall-element: ir-raġġi orizzontali għall-wisa’ tiegħu, ir-raġġi vertikali għall-għoli. 50% iddawwar kwadru f’ċirku u rettangolu f’ellissi. Il-perċentwali huma dak li jagħmel il-blobs jiskalaw mal-element.

Għal buttuna f’forma ta’ pillola, uża raġġ f’pikseli ta’ mill-inqas nofs l-għoli. Il-preset Pillola jagħmel eżattament dan għad-daqs tal-kaxxa li daħħalt; valur kbir bħal 999px jaħdem ukoll.

Meta r-raġġi ta’ rkejjen ġirien jiżdiedu għal iktar mill-ġenb li jaqsmu, il-brawżers inaqqsu r-raġġi kollha proporzjonalment sakemm jaqblu. Għalhekk, jekk tkaxkar żewġ handles lil hinn minn xulxin, il-forma ma tinkisirx.

Forom blob

Il-preset tal-blob u Blob każwali jużaw tmien perċentwali fejn iż-żewġ handles fuq kull naħa jammontaw għal 100 %. Il-kurvi mbagħad jiltaqgħu eżatt u l-forma tidher bħal ċagħaq lixx. Tista’ tanimaħ bejn żewġ blobs b’transition CSS fuq border-radius għal effett ta’ “morphing”.