Delovanje lastnosti CSS border-radius
Lastnost border-radius v jeziku CSS določa zaobljenost kotov polja. S spreminjanjem teh vrednosti lahko oblikovalci spremenijo privzete ostre robove elementov HTML v mehkejše oblike. Generator za border-radius omogoča natančno prilagajanje vsakega kota posebej ali vseh hkrati, pri čemer uporablja slikovne pike (px) ali odstotke (%).
Začetna vrednost drsnika v orodju je nastavljena na 24, kar ustvari kodo border-radius: 24px;. Ko spreminjate nastavitve, se vizualni prikaz polja takoj posodobi v delu za predogled, pod njim pa se izpiše ustrezna koda CSS pod naslovom "CSS". Kodo lahko nato prekopirate z gumbom "Kopiraj CSS".
Razlika med slikovnimi pikami in odstotki
Izbira enote vpliva na to, kako se zaobljenost prilagaja velikosti samega elementa:
- Slikovne pike (px): Kot se zaobli za fiksno vrednost. Zaobljenost ostane enaka, ne glede na to, kako velik ali majhen je element na zaslonu.
- Odstotki (%): Kot se zaobli relativno glede na dimenzije polja. Vodoravni odstotek sledi širini elementa, navpični odstotek pa njegovi višini. To pomeni, da se bo oblika prilagajala spreminjanju velikosti elementa, kar je ključno za odzivno oblikovanje.
Če uporabite enoto "%" na kvadratnem elementu in nastavite vse kote na 50 %, bo rezultat popoln krog.
Osnovno in napredno oblikovanje z eliptičnimi koti
Ko je eliptični način izklopljen, je vsak kot definiran kot četrtina kroga z enim samim polmerom. Vsi prehodi so simetrični.
Z vklopom možnosti "Eliptični koti" pa preidete v napredni način oblikovanja. V tem načinu dobi vsak kot ločen vodoravni in navpični polmer. To omogoča ustvarjanje asimetričnih, mehkejših in bolj organskih oblik, ki spominjajo na mehurčke ali liste.
V ozadju CSS uporablja zapis z dvema vrednostma, ločenima s poševnico (na primer border-radius: 10px / 20px;), kjer vrednosti pred poševnico določajo vodoravne polmere, vrednosti za njo pa navpične polmere. Generator samodejno zapiše to obliko zapisa s poševnico, ko je eliptični način aktiven, in se vrne k krajšemu zapisu, ko so koti ponovno okrogli.
Ustvarjanje krogov, tablet in organskih oblik
Z ustreznimi nastavitvami lahko hitro dosežete specifične geometrijske oblike:
- Popoln krog: Povežite vse kote, preklopite enoto na "%" in nastavite vrednost na 50 %. Pogoj za popoln krog je, da je izhodiščni element kvadratne oblike.
- Oblika tablete (pill-shaped button): Obdržite enoto "px" in povlecite drsnik za zaobljenost čez polovico višine gumba. Strani gumba bodo ostale popolnoma zaobljene v polkrog, ne glede na to, kako širok bo gumb.
- Organske oblike (mehurčki): Z vklopljenim eliptičnim načinom in ločenim nastavljanjem vodoravnih ter navpičnih drsnikov za vsak kot lahko ustvarite asimetrične krivulje, ki delujejo naravno in tekoče.
Hitro oblikovanje s prednastavitvami
Orodje vsebuje gumbe za hitre prednastavitve pod naslovom "Prednastavitve", ki z enim klikom spremenijo obliko polja:
- Ostro: Nastavi vse kote na 0, kar vrne polje v prvotno pravokotno obliko z ostrimi robovi.
- Zaobljeno: Ustvari klasične, zmerno zaobljene robove.
- Krog: Nastavi vse kote na 50 % za takojšnjo pretvorbo kvadrata v krog.
- Mehurček (Blob): Uporabi eliptične kote za ustvarjanje nepravilne, organske oblike.
- List (Leaf): Zaobli samo nasprotna si kota, medtem ko druga dva ostaneta ostra, kar ustvari obliko lista.
Zasebnost in obdelava podatkov
Uporaba tega generatorja je popolnoma lokalna. Vsak kot se izriše neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo, kar pomeni, da vaši oblikovalski podatki ne zapustijo vaše naprave.
Pogosta vprašanja
Kako delujejo štirje koti in razlika med px in %?
Štirje drsniki v smeri urinega kazalca ustrezajo kotom zgoraj levo, zgoraj desno, spodaj desno in spodaj levo. V slikovnih pikah se kot zaobli za fiksno vrednost; v odstotkih se zaobli glede na polje — vodoravni odstotek sledi širini, navpični pa višini, zato 50 % spremeni kvadrat v krog.
Kaj omogoča eliptični način?
Ko je možnost izklopljena, je vsak kot četrtina kroga z enim polmerom. Ko jo vklopite, dobi vsak kot ločen vodoravni in navpični polmer, s čimer lahko ustvarite mehke, organske oblike "mehurčkov". Generator namesto vas zapiše obliko z dvema vrednostma, ločenima s poševnico, in se vrne na kratko obliko, ko so koti spet okrogli.
Kako ustvarim popoln krog ali obliko tablete?
Povežite kote, preklopite na odstotke in nastavite 50 %: kvadrat postane krog. Za gumb v obliki tablete raje obdržite slikovne pike (px) in povlecite kot čez polovico višine gumba — stranice bodo ostale popolnoma zaobljene pri kateri koli širini. Prednastavitev Krog nastavi prvi primer z enim klikom.