CSS border-radius omaduse mõistmine
Veebidisainis määrab CSS-i omadus border-radius elementide nurkade ümaruse. See võimaldab muuta traditsioonilised teravate nurkadega kastid pehmemaks ja visuaalselt atraktiivsemaks. Border Radiuse generaator on tööriist, mis võimaldab neid nurki reaalajas reguleerida ja genereerib automaatselt vajaliku CSS-koodi.
Tööriista algväärtus on 24, mis annab tulemuseks koodirea border-radius: 24px;. Generaator kaardistab neli nurgaliugurit päripäeva, alustades ülal-vasakust nurgast ja liikudes edasi ülal-paremale, all-paremale ning all-vasakule nurgale. Kui nurgad on ühendatud, juhib kõiki nelja nurka üksainus liugur siltidega "Kõik nurgad". Nurkade lahtiühendamisel saab iga nurka reguleerida eraldi, kasutades liugureid "Ülal vasakul", "Ülal paremal", "All paremal" ja "All vasakul". Kõik liugurid töötavad vahemikus 0–100.
Piksel- ja protsentühikute erinevused
Ümaruse määramisel on kriitiline vahe, kas kasutatakse piksleid või protsente. Ühikuvalija võimaldab lülituda kahe režiimi vahel:
- px (pikslid): Pikslite puhul ümardatakse nurka fikseeritud väärtuse võrra, sõltumata elemendi enda mõõtmetest.
- % (protsent): Protsentuaalne väärtus ümardab nurka suhestatuna kasti mõõtmetega. Horisontaalne protsentuaalne väärtus lähtub elemendi laiusest ning vertikaalne protsentuaalne väärtus elemendi kõrgusest.
See erisus mõjutab otseselt seda, kuidas kujundus käitub responsiivses disainis, kus elementide suurused muutuvad vastavalt ekraanile.
Täiusliku ringi ja kapslikuju saavutamine
CSS-is on teatud standardkujundite loomiseks kindlad reeglid, mida saab selle generaatoriga kiiresti rakendada:
- Täiuslik ring: Ruudukujulisest elemendist täiusliku ringi loomiseks tuleb nurgad ühendada, valida ühikuks protsent (%) ning seada väärtuseks 50%. Sama tulemuse saab ühe klõpsuga, kui valida eelseadistus "Ring", mis määrab automaatselt kõigi nurkade väärtuseks 50%.
- Kapslikujuline nupp (pill-shape): Kapslikujulise nupu loomiseks tuleb säilitada pikselühik (px) ja lohistada nurga raadius suuremaks kui pool nupu kõrgusest. Sellisel juhul jäävad nupu küljed täielikult ümaraks igasuguse laiuse juures, ilma et kujund moonduks.
Keerukamad kujundid elliptilise režiimiga
Kui tavaline ümarus loob igasse nurka veerandringi ühe raadiusega, siis elliptiliste nurkade režiim võimaldab luua palju keerukamaid ja orgaanilisemaid vorme. Aktiveerides valiku "Elliptilised nurgad", saab iga nurk eraldi horisontaalse ja vertikaalse raadiuse. Sel juhul ilmuvad liugurite juurde täiendavad valikud "Horisontaalne" ja "Vertikaalne".
Elliptilises režiimis kirjutab generaator CSS-koodi kahe väärtusega kaldkriipsuvormingus (näiteks border-radius: 10px / 20px;), kus enne kaldkriipsu on horisontaalsed raadiused ja pärast seda vertikaalsed raadiused. Kui elliptiline režiim välja lülitatakse ja nurgad on taas ümarad, naaseb generaator automaatselt lühema koodivormi juurde. See režiim on asendamatu pehmete, asümmeetriliste "mulli" (blob) kujundite loomiseks.
Eelseadistuste kasutamine disainis
Kiireks töövooks sisaldab tööriist spetsiaalseid eelseadistusi, mis muudavad kasti kuju ühe klõpsuga. Jaotises "Eelseadistused" on saadaval järgmised nupud:
- Terav: Eemaldab igasuguse ümaruse, seades väärtused nulli.
- Ümar: Loob standardse pehme nurgaga kasti.
- Ring: Seadistab kõik nurgad 50% peale, luues ruudust ringi.
- Mull (Blob): Kasutab elliptilisi nurki, et luua ebakorrapärane orgaaniline kujund.
- Leht: Loob diagonaalselt vastastikku asuvate nurkade ümardamise teel lehekujulise elemendi.
Genereeritud koodi saab kopeerida nupuga "Kopeeri CSS", mis asub jaotise "CSS" all, ning kleepida otse oma veebiprojekti stiililehele.
Privaatsus ja andmetöötlus
Border Radiuse generaator töötab täielikult kliendipoolselt. Iga nurk joonistatakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse, tagades andmete kohaliku töötlemise.
Korduma kippuvad küsimused
Kuidas toimivad neli nurka ning px vs %?
Neli liugurit vastavad päripäeva ülal-vasakule, ülal-paremale, all-paremale ja all-vasakule nurgale. Pikslites ümardatakse nurk kindla väärtuse võrra; protsentides ümardatakse seda kasti suhtes – horisontaalne protsent järgib laiust ja vertikaalne kõrgust, mistõttu 50% muudab ruudu ringiks.
Mida teeb elliptiline režiim?
Kui see on väljas, on iga nurk ühe raadiusega veerandring. Sisselülitamisel saab iga nurk eraldi horisontaalse ja vertikaalse raadiuse, mis võimaldab luua pehmeid, orgaanilisi „mulli“ (blob) kujundeid. Generaator kirjutab teie eest kahe väärtusega kaldkriipsuga vormi ja naaseb lühivormi juurde, kui nurgad on taas ümarad.
Kuidas luua täiuslikku ringi või kapslikuju?
Ühendage nurgad, lülituge protsentidele ja määrake väärtuseks 50%: ruudust saab ring. Kapslikujulise nupu puhul säilitage pikslid ja lohistage nurka nupu poolest kõrgusest kaugemale – küljed jäävad igasuguse laiuse juures täielikult ümaraks. Ringi eelseadistus seadistab esimese variandi ühe klõpsuga.