Funksionimi i vetisë CSS border-radius
Vetia border-radius në CSS përcakton se si rrumbullakosen këndet e kufirit të një elementi. Ky mjet mundëson rregullimin e rrumbullakësisë së këndeve të një kutie përmes rrëshqitësve ndërveprues, duke kontrolluar çdo kënd individualisht ose duke i lidhur ato së bashku. Katër rrëshqitësit e këndeve mapohen sipas akrepave të orës, duke filluar nga këndi majtas-lart, djathtas-lart, djathtas-poshtë dhe duke përfunduar në majtas-poshtë.
Gjatë përdorimit të mjetit, vlera fillestare e rrëshqitësit është e vendosur në 24, gjë që gjeneron kodin fillestar border-radius: 24px;. Çdo ndryshim i bërë pasqyrohet menjëherë në zonën e pamjes paraprake (Preview), e cila tregon vizualisht kutinë me rrezen e aplikuar. Kodi i gjeneruar shfaqet nën pjesën e emërtuar "CSS" dhe mund të kopjohet direkt duke përdorur butonin "Kopjo CSS".
Dallimi midis njësive px dhe %
Zgjedhja e njësisë ndikon drejtpërdrejt në mënyrën se si llogaritet rrumbullakësia e elementit në dizajnin tuaj:
- Në piksela (px): Këndi rrumbullakoset me një sasi fikse dhe të pandryshueshme, pavarësisht nga përmasat e kutisë. Kjo njësi është e përshtatshme për elemente me madhësi të përcaktuar ku dëshironi konsistencë absolute të rrezes.
- Në përqindje (%): Këndi rrumbullakoset në raport me përmasat e vetë kutisë. Një përqindje horizontale ndjek gjerësinë e elementit, ndërsa një përqindje vertikale ndjek lartësinë e tij. Kjo sjellje është thelbësore për dizajnin përgjegjës (responsive design), ku elementet ndryshojnë madhësinë sipas ekranit.
Krijimi i rretheve të përsosura dhe butonave në formë pilule
Përmes rregullave të CSS-së, mund të arrihen forma gjeometrike specifike duke manipuluar vlerat e rrezes:
- Rrethi i përsosur: Për të kthyer një element katror në një rreth të përsosur, duhet të aktivizoni opsionin për të lidhur të gjitha këndet, të kaloni njësinë në përqindje (%) dhe të vendosni vlerën në 50%. Mjeti ofron gjithashtu butonin e parazgjedhur "Rreth" i cili aplikon automatikisht vlerën 50% në të gjitha këndet.
- Butoni në formë pilule: Për të krijuar një buton në formë pilule, duhet të mbani njësinë në piksela (px) dhe të tërhiqni rrëshqitësin e këndit përtej gjysmës së lartësisë së butonit. Në këtë mënyrë, anët e elementit do të mbeten plotësisht të rrumbullakosura në çdo gjerësi që mund të ketë butoni.
Modaliteti eliptik për forma organike
Kur modaliteti eliptik është i çaktivizuar, çdo kënd përfaqëson një çerek rrethi me një rreze të vetme. Kur aktivizohet ky modalitet, çdo kënd merr një rreze horizontale dhe vertikale të veçantë. Kjo lejon krijimin e formave më të buta dhe organike të njohura si "blob".
Në kodin CSS, ky dallim strukturor shfaqet si më poshtë:
- Pa modalitet eliptik: Përdoret forma e shkurtër standarde e CSS-së me një vlerë të vetme për kënd.
- Me modalitet eliptik: Gjeneratori shkruan formën me dy vlera të ndara nga një vijë e pjerrët (slash form). Nëse këndet kthehen sërish në vlera të barabarta të rrumbullakëta, mjeti kalon automatikisht përsëri te forma e shkurtër e shkrimit.
Parazgjedhjet e shpejta të dizajnit
Mjeti përfshin butona të parazgjedhur që lejojnë aplikimin e menjëhershëm të disa formave të gatshme:
| Parazgjedhja | Përshkrimi i formës së krijuar |
|---|---|
| E mprehtë | Kthen të gjitha vlerat në 0, duke krijuar kënde të mprehta 90 gradë. |
| E rrumbullakosur | Aplikon një rrumbullakësi standarde dhe të moderuar në kënde. |
| Rreth | Vendos të gjitha këndet në 50% për të krijuar një rreth nga një katror. |
| Blob | Krijon një formë organike dhe asimetrike duke përdorur modalitetin eliptik. |
| Gjethe | Rrumbullakos vetëm këndet e kundërta për të simuluar formën e një gjetheje. |
Përpunimi i të dhënave dhe privatësia
Çdo kënd vizatohet drejtpërdrejt në shfletuesin tuaj. Asgjë që vendosni këtu nuk ngarkohet në BroBroGo, duke siguruar që i gjithë procesi i gjenerimit të kodit të mbetet lokal në pajisjen tuaj.
Pyetje të shpeshta (FAQ)
Si funksionojnë katër këndet dhe px kundrejt %?
Katër rrëshqitësit lidhen, sipas akrepave të orës, me këndet majtas-lart, djathtas-lart, djathtas-poshtë dhe majtas-poshtë. Në piksela, një kënd rrumbullakoset me një sasi fikse; në përqindje rrumbullakoset në raport me kutinë — një përqindje horizontale ndjek gjerësinë dhe një përqindje vertikale ndjek lartësinë, kështu që 50% e kthen një katror në rreth.
Çfarë bën modaliteti eliptik?
Kur është i çaktivizuar, çdo kënd është një çerek rrethi me një rreze të vetme. Aktivizojeni dhe çdo kënd merr një rreze horizontale dhe vertikale të veçantë, që është mënyra se si ndërtohen format e buta organike "blob". Gjeneratori shkruan formën me vijë të pjerrët me dy vlera për ju dhe kthehet te forma e shkurtër sapo këndet të jenë sërish të rrumbullakëta.
Si mund të krijoj një rreth të përsosur ose një formë pilule?
Lidhni këndet, kaloni në përqindje dhe vendosni 50%: një katror kthehet në rreth. Për një buton në formë pilule, mbani pikselat dhe tërhiqni një kënd përtej gjysmës së lartësisë së butonit — anët mbeten plotësisht të rrumbullakosura në çdo gjerësi. Parazgjedhja "Rreth" e rregullon rastin e parë me një klikim.