Razumijevanje CSS svojstva border-radius
Svojstvo border-radius u CSS-u definira način na koji se zaobljuju kutovi okvira nekog elementa na web stranici. Ovaj alat omogućuje vizualno podešavanje zaobljenosti svakog kuta pojedinačno ili njihovo zajedničko povezivanje, uz odabir između piksela i postotaka. Početna vrijednost klizača u alatu postavljena je na 24, što rezultira kodom border-radius: 24px;.
Četiri klizača za kutove mapiraju se u smjeru kazaljke na satu:
- Gore lijevo (
cornerTL) - Gore desno (
cornerTR) - Dolje desno (
cornerBR) - Dolje lijevo (
cornerBL)
Kada su kutovi povezani, jedan klizač pod nazivom "Svi kutovi" (allCorners) kontrolira sva četiri kuta istovremeno. Kada se veza isključi, dostupna su četiri zasebna klizača s rasponom vrijednosti od 0 do 100.
Razlika između piksela i postotaka
Prilikom oblikovanja kutova, odabir mjerne jedinice u selektoru "Jedinica" (unitLabel) bitno mijenja ponašanje elementa:
- Pikseli (px): U pikselima se kut zaobljuje za fiksni iznos. Ako dizajnirate gumb u obliku pilule, zadržite piksele i povucite kut preko polovice visine gumba. Na taj način stranice ostaju potpuno zaobljene pri bilo kojoj širini elementa.
- Postoci (%): U postocima se kut zaobljuje u odnosu na dimenzije samog okvira. Vodoravni postotak prati širinu elementa, dok okomiti postotak prati njegovu visinu. Postavljanje svih kutova na 50% u postocima pretvara kvadratni element u savršen krug.
Napredni oblici uz eliptični način rada
Kada je eliptični način rada isključen, svaki je kut četvrtina kruga s jednim radijusom. Uključivanjem opcije "Eliptični kutovi" (ellipticalLabel) aktivira se napredni način rada u kojem svaki kut dobiva zaseban vodoravni ("Vodoravno" / horizontal) i okomiti ("Okomito" / vertical) klizač.
Ovaj način rada omogućuje stvaranje mekših, organskih oblika. Generator u ovom slučaju automatski piše CSS kod koristeći kosu crtu (/) za razdvajanje vodoravnih i okomitih vrijednosti. Kada kutovi ponovno postanu okrugli, kod se vraća u standardni kratki oblik.
Brzo oblikovanje pomoću predložaka
Alat sadrži predefinirane gumbe pod naslovom "Predlošci" (presetsHeading) koji omogućuju trenutačnu promjenu oblika:
| Predložak | Naziv u sučelju | Efekt i ponašanje |
|---|---|---|
| Sharp | Oštro (presetSharp) |
Postavlja sve vrijednosti na 0, uklanjajući zaobljenja. |
| Rounded | Zaobljeno (presetRounded) |
Primjenjuje standardno, blago zaobljenje kutova. |
| Circle | Krug (presetCircle) |
Postavlja sve kutove na 50% za stvaranje pravilnog kruga. |
| Blob | Mrlja (Blob) (presetBlob) |
Koristi eliptične kutove za stvaranje nepravilnog, organskog oblika. |
| Leaf | List (presetLeaf) |
Oblikuje dijagonalno suprotne kutove kako bi se dobio izgled lista. |
Nakon što vizualno prilagodite izgled u prozoru za pregled, generirani CSS kod prikazuje se ispod naslova "CSS" (cssHeading), a možete ga spremiti klikom na gumb "Kopiraj CSS" (copyCss).
Privatnost i lokalna obrada podataka
Svaki se kut iscrtava izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo. Obrada se odvija lokalno na vašem uređaju, bez prijenosa podataka na poslužitelj.
Često postavljana pitanja (FAQ)
Kako funkcioniraju četiri kuta i razlika između px i %?
Četiri klizača mapiraju se, u smjeru kazaljke na satu, na gornji lijevi, gornji desni, donji desni i donji lijevi kut. U pikselima se kut zaobljuje za fiksni iznos; u postocima se zaobljuje u odnosu na okvir — vodoravni postotak prati širinu, a okomiti visinu, pa 50% pretvara kvadrat u krug.
Što radi eliptični način rada?
Kada je isključeno, svaki je kut četvrtina kruga s jednim radijusom. Kada ga uključite, svaki kut dobiva zaseban vodoravan i okomit radijus, što vam omogućuje stvaranje mekih, organskih oblika mrlje ("blob"). Generator automatski piše kosu crtu za dvije vrijednosti u CSS-u i vraća se na kratki oblik kada kutovi ponovno postanu okrugli.
Kako mogu napraviti savršen krug ili oblik pilule?
Povežite kutove, prebacite na postotke i postavite na 50%: kvadrat postaje krug. Za gumb u obliku pilule zadržite piksele i povucite kut preko polovice visine gumba — stranice ostaju potpuno zaobljene pri bilo kojoj širini. Predložak "Krug" postavlja prvi slučaj jednim klikom.