Ce este și cum funcționează Generatorul Border Radius
Acest instrument vă permite să ajustați rotunjimea colțurilor unei casete. Aveți posibilitatea de a controla fiecare colț în mod individual sau de a le conecta împreună, alegând totodată între unitățile de măsură în pixeli sau în procente. De asemenea, instrumentul oferă un mod eliptic pentru a crea forme mai moi și mai organice, oferind fiecărui colț raze orizontale și verticale separate. Generatorul creează instantaneu codul CSS corespunzător pentru designul dumneavoastră.
Fiecare colț este desenat direct în browserul dumneavoastră. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo.
Cine are nevoie de acest instrument
Acest generator este conceput pentru:
- O persoană care dorește să rotunjească rapid colțurile unei casete pentru un design web.
- Cineva care are nevoie să creeze un cerc perfect dintr-un element pătrat.
- O persoană care proiectează un buton în formă de pastilă.
- Cineva care dorește să creeze forme organice de tip „picătură” (blob) pentru designul său.
- O persoană care are nevoie să genereze cod CSS pentru raze de colț personalizate.
Intrările și setările disponibile în interfață
Pentru a obține forma dorită, aveți la dispoziție o serie de controale și glisoare în interfață:
- Glisoare: Acestea sunt utilizate pentru a ajusta rotunjimea colțurilor, având un interval de valori de la 0 la 100. Valoarea inițială a glisorului este 24, ceea ce generează codul
border-radius: 24px;.- Când colțurile sunt conectate, un singur glisor etichetat „Toate colțurile” controlează toate cele patru colțuri.
- Când colțurile sunt deconectate, sunt disponibile patru glisoare, etichetate „Stânga sus”, „Dreapta sus”, „Dreapta jos” și „Stânga jos”. Cele patru glisoare pentru colțuri se mapează în sensul acelor de ceasornic.
- În modul eliptic, fiecare colț are în plus un glisor pentru „Orizontal” și unul pentru „Vertical”.
- Selectorul de unitate: Vă permite să comutați între unitățile „px” (pixeli) și „%” (procente).
- Comutatorul Conectează toate colțurile: Folosit pentru a conecta sau a deconecta ajustările colțurilor.
- Comutatorul Colțuri eliptice: Activează sau dezactivează modul eliptic.
- Presetări: Butoane rapide etichetate „Ascuțit”, „Rotunjit”, „Cerc”, „Picătură (Blob)” și „Frunză”. Presetarea „Cerc” configurează automat toate colțurile la valoarea de 50%.
Ieșirile oferite de generator
Pe măsură ce modificați setările, instrumentul vă oferă următoarele rezultate în timp real:
- Previzualizare: O reprezentare vizuală a casetei cu raza de colț aplicată.
- CSS: Codul CSS generat, afișat sub titlul „CSS”.
- Butonul Copiază CSS: Un buton etichetat „Copiază CSS” care vă permite să preluați rapid codul rezultat.
Reguli de funcționare și cazuri speciale
În utilizarea generatorului se aplică o serie de reguli specifice în funcție de unitățile și modurile selectate:
- Diferența dintre unități: În unitatea pixeli, un colț se rotunjește cu o valoare fixă. În unitatea procente, colțul se rotunjește relativ la casetă; un procent orizontal urmează lățimea elementului, în timp ce un procent vertical urmează înălțimea acestuia. Setarea tuturor colțurilor la 50% în procente transformă un pătrat într-un cerc perfect.
- Modul eliptic: Când modul eliptic este dezactivat, fiecare colț este un sfert de cerc cu o singură rază. Când modul eliptic este activat, fiecare colț primește o rază orizontală și una verticală separată. Generatorul scrie forma cu bară oblică (slash) cu două valori pentru CSS atunci când modul eliptic este activat și revine la forma scurtă atunci când colțurile devin din nou rotunde (cu o singură rază).
- Crearea unui cerc perfect: Pentru a realiza un cerc perfect, conectați colțurile, comutați pe procente și setați valoarea la 50%.
- Crearea unui buton în formă de pastilă: Pentru a obține un buton în formă de pastilă, păstrați unitatea în pixeli și trageți un colț dincolo de jumătatea înălțimii butonului; în acest mod, marginile vor rămâne complet rotunjite la orice lățime.
Întrebări frecvente (FAQ)
Cum funcționează cele patru colțuri și diferența dintre px și %?
Cele patru glisoare corespund, în sensul acelor de ceasornic, colțurilor stânga-sus, dreapta-sus, dreapta-jos și stânga-jos. În pixeli, un colț se rotunjește cu o valoare fixă; în procente, se rotunjește relativ la casetă — un procent orizontal urmează lățimea, iar un procent vertical urmează înălțimea, astfel că 50% transformă un pătrat într-un cerc.
Ce face modul eliptic?
Când este oprit, fiecare colț este un sfert de cerc cu o singură rază. Când îl activați, fiecare colț primește o rază orizontală și una verticală separată, mod prin care puteți crea forme organice de tip „picătură” (blob). Generatorul scrie pentru dumneavoastră sintaxa cu bară oblică pentru cele două valori și revine la forma scurtă imediat ce colțurile sunt din nou rotunde.
Cum pot obține un cerc perfect sau o formă de pastilă?
Conectați colțurile, comutați pe procente și setați 50%: un pătrat devine un cerc perfect. Pentru un buton în formă de pastilă, păstrați pixelii și trageți un colț dincolo de jumătatea înălțimii butonului — marginile vor rămâne complet rotunjite la orice lățime. Presetarea „Cerc” configurează primul caz dintr-un singur clic.