Gjenerator i border-radius

Si ta përdorësh gjeneratorin e border-radius

1. Zhvendos pikat në skajet e pamjes paraprake. Çdo pikë me ngjyrë cakton rrezen horizontale të një cepi; kur Cepa eliptikë (8 vlera) është i shënuar, pikat e bardha caktojnë rrezet vertikale.
2. Ose shkruaj vlera të sakta te Cepat: Lart majtas, Lart djathtas, Poshtë djathtas dhe Poshtë majtas, secili me një fushë Horizontal dhe një Vertikal.
3. Zgjidh Njësinë: % (përqindje e kutisë) ose px (piksele). Ndërrimi i konverton vlerat aktuale, prandaj forma mbetet e njëjtë.
4. Vendos Gjerësinë e kutisë (px) dhe Lartësinë e kutisë (px) që të përputhen me elementin tënd, dhe përdor Të gjitha cepat për t’i rrumbullakosur të gjithë cepat njëherësh.
5. Provo Gatishmëritë (I rrumbullakosur, Pilulë, Rreth, Gjethe, Pikë, Vezë, Biletë dhe tri blob-e) ose kliko Blob i rastësishëm për një formë organike.
6. Shëno Veti të plota nëse preferon katër deklarimet border-*-radius, pastaj kopjo Kodin CSS me butonin Kopjo.

Tastierë: fokuso një pikë dhe shtyp shigjetat për të ndryshuar rrezen e saj me një hap (me 10 kur mban Shift).

Sintaksa e border-radius

border-radius pranon një deri në katër vlera, në radhën lart-majtas, lart-djathtas, poshtë-djathtas, poshtë-majtas. Si te margjinat, vlerat që mungojnë kopjohen nga cepi përballë: border-radius: 10px 20px rrumbullakos lart-majtas dhe poshtë-djathtas me 10px, e dy të tjerët me 20px. Mjeti shkruan gjithmonë formën ekuivalente më të shkurtër.

Në fakt çdo cep është një çerek elipse me dy rreze. Një vijë e pjerrët (/) i ndan rrezet horizontale nga ato vertikale, gjë që jep deri në tetë vlera:

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

Para vijës: rrezet horizontale të katër cepave. Pas saj: rrezet vertikale. Kur të dy listat janë të barabarta, pjesa pas vijës hiqet.

Piksele apo përqindje?

• px jep të njëjtën kurbë pavarësisht nga madhësia e elementit. Është zgjedhja e duhur për butona, karta dhe fusha: border-radius: 8px.
• % është në raport me elementin: rrezet horizontale me gjerësinë e tij, ato vertikale me lartësinë. 50% e kthen një katror në rreth dhe një drejtkëndësh në elipsë. Përqindjet bëjnë që format blob të shkallëzohen bashkë me elementin.

Për një buton në formë pilule përdor një rreze në piksele që është të paktën gjysma e lartësisë. Gatishmëria Pilulë bën pikërisht këtë për madhësinë e kutisë që ke shkruar; funksionon edhe një vlerë shumë e madhe si 999px.

Kur rrezet fqinje mblidhen më shumë se brinja që ndajnë, shfletuesit i zvogëlojnë të gjitha rrezet në mënyrë proporcionale derisa të futen. Prandaj, nëse i zhvendos dy pika përtej njëra-tjetrës, forma nuk prishet.

Format blob

Gatishmëritë blob dhe Blob i rastësishëm përdorin tetë përqindje, ku dy pikat në çdo brinjë mbledhin 100 %. Atëherë kurbat takohen saktësisht dhe forma duket si një guralec i lëmuar. Animo midis dy blob-eve me një transition CSS mbi border-radius për një efekt “morfimi”.