Generátor zaoblenia rohov (Border Radius)

Fungovanie vlastnosti CSS border-radius

Vlastnosť border-radius v jazyku CSS definuje, do akej miery budú zaoblené rohy ohraničenia daného prvku. Tento nástroj umožňuje vizuálne nastavovať zaoblenie rohov boxu, pričom môžete ovládať každý roh samostatne alebo ich prepojiť do jedného spoločného nastavenia. Na výber sú jednotky v pixeloch alebo v percentách.

Nástroj ponúka aj eliptický režim, ktorý slúži na vytváranie jemnejších a organickejších tvarov. V tomto režime má každý roh pridelený samostatný horizontálny a vertikálny polomer. Generátor okamžite vytvára zodpovedajúci CSS kód, ktorý sa zobrazuje pod nadpisom "CSS".

Počiatočná hodnota posuvníka je nastavená na 24, čo generuje kód border-radius: 24px;. Celý proces výpočtu a vykresľovania prebieha lokálne; každý roh sa vykresľuje priamo vo vašom prehliadači a nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo.

Rozdiely medzi pixelmi a percentami v CSS

Pri definovaní zaoblenia rohov je kľúčové zvoliť správnu jednotku, pričom nástroj umožňuje prepínať medzi "px" (pixely) a "%" (percentá). Správanie týchto jednotiek sa zásadne líši:

• Pixely (px): Pri použití pixelov sa roh zaobľuje o pevnú, absolútnu hodnotu. Bez ohľadu na to, aký veľký je samotný HTML prvok, polomer zaoblenia zostáva konštantný.
• Percentá (%): V percentuálnom režime sa roh zaobľuje relatívne k rozmerom boxu. Horizontálne percento sa riadi šírkou prvku a vertikálne percento sa riadi jeho výškou. To znamená, že na obdĺžnikovom prvku vytvoria percentá eliptické zaoblenie, zatiaľ čo na štvorcovom prvku zostane zaoblenie symetrické.

Mapovanie rohov a ovládacie prvky

Generátor mapuje štyri rohové posuvníky v smere hodinových ručičiek. Toto poradie presne zodpovedá štandardnej syntaxi CSS:

1. Vľavo hore (Top-left)
2. Vpravo hore (Top-right)
3. Vpravo dole (Bottom-right)
4. Vľavo dole (Bottom-left)

Ak je aktívna možnosť "Prepojiť všetky rohy", všetky štyri rohy ovláda jediný posuvník s označením "Všetky rohy". Po zrušení tohto prepojenia môžete nastavovať každý roh individuálne pomocou samostatných posuvníkov pre "Vľavo hore", "Vpravo hore", "Vpravo dole" a "Vľavo dole". Rozsah všetkých posuvníkov je od 0 do 100.

Pokročilé tvarovanie v eliptickom režime

Keď je eliptický režim vypnutý, každý roh tvorí presnú štvrtinu kruhu s jediným polomerom. Aktivovaním možnosti "Eliptické rohy" prejdete do režimu, kde pre každý roh pribudnú dva samostatné posuvníky: "Horizontálne" a "Vertikálne".

Tento režim mení štruktúru výsledného CSS kódu. V CSS sa eliptické zaoblenie zapisuje pomocou dvoch hodnôt oddelených lomkou (napr. border-radius: 10px / 20px;), kde hodnoty pred lomkou definujú horizontálne polomery a hodnoty za lomkou definujú vertikálne polomery. Generátor tento zápis s lomkou vytvára automaticky. Akonáhle sa rohy opäť zjednotia do kruhového tvaru, kód sa automaticky vráti k skrátenej jednohodnotovej forme.

Praktické techniky: Kruhy, pilulky a organické tvary

Pomocou správnej kombinácie jednotiek a hodnôt môžete dosiahnuť špecifické dizajnové prvky:

• Dokonalý kruh: Na vytvorenie dokonalého kruhu zo štvorcového prvku prepojte všetky rohy, prepnite jednotku na percentá a nastavte hodnotu posuvníka na 50 %.
• Tlačidlo v tvare pilulky: Ak navrhujete responzívne tlačidlo, ktoré si má zachovať plne zaoblené bočné strany pri akejkoľvek šírke, ponechajte jednotky v pixeloch a potiahnite posuvník za polovicu výšky tlačidla. Strany zostanú dokonale zaoblené bez deformácie.
• Organické tvary (Kvapky): Aktivovaním eliptických rohov a asymetrickým nastavením horizontálnych a vertikálnych polomerov môžete vytvárať nepravidelné, tekuté tvary vhodné pre moderné pozadia webov.

Využitie predvolieb v rozhraní

Pre urýchlenie práce obsahuje nástroj prednastavené šablóny, ktoré okamžite zmenia geometriu boxu. K dispozícii sú tieto tlačidlá pod nadpisom "Predvoľby":

• Ostré: Vynuluje všetky hodnoty zaoblenia, čím vznikne klasický obdĺžnik s ostrými hranami.
• Zaoblené: Nastaví mierne, univerzálne zaoblenie rohov vhodné pre bežné karty a tlačidlá.
• Kruh: Nastaví všetky rohy na hodnotu 50 %, čo pri štvorcovom boxe okamžite vytvorí kruh.
• Kvapka: Nastaví asymetrické eliptické hodnoty, ktoré vytvoria nepravidelný organický tvar.
• List: Zaoblí iba protichodné rohy, zatiaľ čo zvyšné dva zostanú ostré, čím vizuálne napodobní tvar listu.

Po dosiahnutí požadovaného vzhľadu v sekcii náhľadu stačí kliknúť na tlačidlo "Kopírovať CSS", čím sa vygenerovaný kód uloží do schránky pre okamžité použitie vo vašom štýle.

Často kladené otázky (FAQ)

Ako fungujú štyri rohy a rozdiel medzi px a %?

Štyri posuvníky zodpovedajú v smere hodinových ručičiek rohom vľavo hore, vpravo hore, vpravo dole a vľavo dole. V pixeloch sa roh zaoblí o pevnú hodnotu; v percentách sa zaobľuje relatívne k boxu – horizontálne percento sa riadi šírkou a vertikálne výškou, takže 50 % zmení štvorec na kruh.

Čo robí eliptický režim?

Keď je vypnutý, každý roh tvorí štvrtinu kruhu s jedným polomerom. Po zapnutí získa každý roh samostatný horizontálny a vertikálny polomer, čo vám umožní vytvárať jemné, organické tvary „kvapiek“. Generátor za vás zapíše zápis s lomkou pre dve hodnoty a vráti sa ku skrátenej forme, hneď ako budú rohy opäť symetrické.

Ako vytvorím dokonalý kruh alebo tvar pilulky?

Prepojte rohy, prepnite jednotky na percentá a nastavte 50 %: zo štvorca sa stane kruh. Ak chcete vytvoriť tlačidlo v tvare pilulky, ponechajte pixely a potiahnite roh za polovicu výšky tlačidla – strany zostanú plne zaoblené pri akejkoľvek šírke. Predvoľba Kruh nastaví prvý prípad jediným kliknutím.