Stilling á rúnnun horna er grundvallaratriði í nútíma vefhönnun til að mýkja útlit ramma og búa til lífrænni form. CSS-eiginleikinn border-radius stýrir því hversu mikið horn á kassa rúnnast. Með því að nota sérhæfðan rafal er hægt að stilla hvert horn fyrir sig eða öll í einu, velja á milli mismunandi mælieininga og virkja flóknari eldingarlaga rúnnun sem gefur óregluleg og mjúk form.
Virkni og stýring á hornum
Tólið vinnur með fjóra sleða sem fylgja réttsælis röð. Þeir byrja efst til vinstri, færast yfir í efst til hægri, því næst neðst til hægri og enda neðst til vinstri. Upphafsgildi sleðanna er stillt á 24, sem skilar CSS-kóðanum border-radius: 24px;.
Hægt er að stýra flæðinu með eftirfarandi stillingum í viðmótinu:
- Tengja öll horn: Þegar kveikt er á þessari stillingu stýrir einn sleði, sem ber heitið „Öll horn“, öllum hornunum fjórum samtímis. Þegar slökkt er á henni birtast fjórir sjálfstæðir sleðar: „Efst til vinstri“, „Efst til hægri“, „Neðst til hægri“ og „Neðst til vinstri“.
- Eining: Valmöguleiki á milli „px“ (pixlar) og „%“ (prósentur).
- Eldingarlaga horn: Þessi valkostur virkjar eldingarlaga stillingu (elliptical mode). Við það bætast við tveir sleðar fyrir hvert horn, merktir „Lárétt“ og „Lóðrétt“.
- Forstillingar: Fljótlegar leiðir til að ná fram ákveðnum formum með hnöppunum „Skarpt“, „Rúnað“, „Hringur“, „Klessa“ og „Blað“.
Allar breytingar sem gerðar eru með sleðunum uppfærast samstundis í sjónrænum sýnishornsramma og tilbúinn CSS-kóði birtist undir fyrirsögninni „CSS“. Hægt er að afrita kóðann beint með hnappnum „Afrita CSS“.
Munurinn á pixlum og prósentum
Val á einingu hefur mikil áhrif á hvernig rúnnunin hegðar sér þegar stærð rammans breytist.
Í pixlum (px) rúnnast hornið um fasta stærð óháð breidd eða hæð rammans. Ef horn er stillt á 20px verður radíus rúnnunarinnar alltaf 20 pixlar, hvort sem rammann er stór eða lítill.
Í prósentum (%) rúnnast hornið í hlutfalli við stærð rammans sjálfs. Lárétt prósenta fylgir heildarbreidd rammans og lóðrétt prósenta fylgir heildarhæð rammans. Þetta þýðir að ef ramminn er ekki fullkomlega ferkantaður verður rúnnunin teygð og sporöskjulaga. Ef öll horn á ferningi eru stillt á 50% breytist ferningurinn í fullkominn hring.
Eldingarlaga rúnnun fyrir flóknari form
Þegar slökkt er á eldingarlaga stillingu er hvert horn rúnnað sem fullkominn fjórðungshringur með einum sameiginlegum radíus fyrir lárétta og lóðrétta ásinn.
Þegar kveikt er á „Eldingarlaga horn“ fær hvert horn tvo sjálfstæða radíusa: einn láréttan og einn lóðréttan. Þetta gerir hönnuðum kleift að búa til mun mýkri, lífrænni og óreglulegri form, eins og dæmigerð „klessuform“ (blob).
Í CSS er þetta táknað með skástriki á milli láréttra og lóðréttra gilda. Tólið skrifar sjálfkrafa þennan tveggja gilda CSS-kóða þegar eldingarlaga stillingin er virk. Ef hornin eru stillt þannig að þau verði hringlaga á ný, fellur rafallinn sjálfkrafa aftur í stutta ritháttinn án skástriksins.
Hagnýt dæmi: Hringir og aflangir hnappar
Hægt er að nýta reglur CSS til að búa til algeng hönnunarform á einfaldan hátt:
- Fullkominn hringur: Til að búa til hring úr ferhyrndum ramma þarf að tengja öll horn saman, skipta yfir í prósentur (%) og draga sleðann í 50%. Forstillingin „Hringur“ gerir þetta sjálfkrafa.
- Aflangur hnappur (pill-shape): Fyrir hnappa sem eiga að halda fullkomlega rúnnuðum hliðum óháð breidd, á að nota pixla (px). Hornin eru tengd saman og sleðinn dreginn fram yfir helming af hæð hnappsins. Við þetta munu hliðarnar haldast fullkomlega rúnnaðar og rúnnunin skekkist ekki þótt hnappurinn verði mjög breiður.
Öryggi og vinnsla gagna
Vefsíðan vinnur öll gögn staðbundið. Hvert horn er teiknað beint í vafranum þínum og engu af því sem þú stillir hér er hlaðið upp á BroBroGo. Vinnslan fer að öllu leyti fram á tækinu þínu.
Algengar spurningar
Hvernig virka hornin fjögur og px gagnvart %?
Sleðarnir fjórir stýra hornunum réttsælis: efst til vinstri, efst til hægri, neðst til hægri og neðst til vinstri. Í pixlum rúnnast hornið um fasta stærð; í prósentum rúnnast það í hlutfalli við rammann — lárétt prósenta fylgir breiddinni og lóðrétt prósenta fylgir hæðinni, þannig að 50% breytir ferningi í hring.
Hvað gerir eldingarlaga (elliptical) stillingin?
Þegar slökkt er á þessu er hvert horn fjórðungshringur með einum radíus. Þegar kveikt er á þessu fær hvert horn sérstakan láréttan og lóðréttan radíus, sem gerir þér kleift að búa til mjúk og lífræn form. Tólfskrifarinn sér um að skrifa gildin tvö með skástriki fyrir þig og fer aftur í stutta formið þegar hornin verða hringlaga á ný.
Hvernig bý ég til fullkominn hring eða aflangan hnapp?
Tengdu hornin saman, skiptu yfir í prósentur og stilltu á 50%: ferningur verður að hring. Fyrir aflangan hnapp skaltu halda þig við pixla og draga horn fram yfir helming hæðar hnappsins — hliðarnar haldast fullkomlega rúnnaðar óháð breidd. Forstillingin „Hringur“ græjar fyrra dæmið með einum smelli.