Principy fungování vlastnosti CSS border-radius
Vlastnost border-radius v CSS definuje zaoblení rohů ohraničení prvků. Tento generátor umožňuje vizuálně nastavovat zakřivení jednotlivých rohů a okamžitě generuje odpovídající kód pro webový design. Výchozí hodnota posuvníku při načtení nástroje je 24, což odpovídá zápisu border-radius: 24px;.
Čtyři posuvníky pro nastavení rohů mapují prvek ve směru hodinových ručiček:
- Vlevo nahoře
- Vpravo nahoře
- Vpravo dole
- Vlevo dole
Pokud jsou rohy propojeny pomocí volby „Propojit všechny rohy“, ovládá všechny čtyři rohy jediný posuvník s označením „Všechny rohy“. Při zrušení tohoto propojení lze nastavit každý roh samostatně pomocí čtyř nezávislých posuvníků. Rozsah všech posuvníků je pevně stanoven od 0 do 100.
Rozdíly mezi jednotkami pixelů a procent
Při definování zaoblení hrají klíčovou roli zvolené jednotky, které lze v nástroji přepínat pomocí volby „Jednotka“:
- Pixely (px): V pixelech se roh zaoblí o pevnou hodnotu bez ohledu na celkovou velikost prvku. Zaoblení zůstává konstantní i při změně rozměrů boxu.
- Procenta (%): V procentech se roh zaoblí relativně k rozměrům boxu. Horizontální procento se řídí šířkou prvku a vertikální procento se řídí výškou prvku. Tento přístup je klíčový pro responzivní design, kde se zaoblení přizpůsobuje měnící se velikosti elementu.
Pokročilé tvarování v eliptickém režimu
Pokud je aktivována volba „Eliptické rohy“, nástroj přejde do eliptického režimu. V běžném režimu je každý roh tvořen čtvrtkruhem s jediným poloměrem. V eliptickém režimu však každý roh získává samostatný horizontální a vertikální poloměr, které lze ovládat posuvníky „Horizontální“ a „Vertikální“.
Tento režim umožňuje vytvářet měkčí a organické tvary. Z hlediska syntaxe CSS generátor v eliptickém režimu zapisuje hodnoty pomocí lomítka, které odděluje horizontální poloměry od vertikálních. Jakmile jsou rohy opět souměrné a eliptický režim se vypne, kód se automaticky vrátí ke zkrácené formě s jedním poloměrem pro každý roh.
Tvorba kruhů, pilulek a využití předvoleb
Nástroj obsahuje předpřipravené rychlé volby v sekci „Předvolby“, které okamžitě změní parametry boxu:
- Ostrý: Nastaví nulové zaoblení všech rohů.
- Zaoblený: Vytvoří standardní jemné zaoblení.
- Kruh: Nastaví všechny rohy na hodnotu 50 %.
- Kapka: Vytvoří nepravidelný organický tvar.
- List: Zaoblí protilehlé rohy pro dosažení vzhledu listu.
Pro specifické designové prvky platí následující postupy:
- Dokonalý kruh: Chcete-li vytvořit dokonalý kruh ze čtvercového prvku, propojte rohy, přepněte jednotku na procenta a nastavte hodnotu na 50 %. Tuto konfiguraci okamžitě aplikuje předvolba „Kruh“.
- Tlačítko ve tvaru pilulky: Pro docílení vzhledu pilulky ponechte jednotky v pixelech a přetáhněte posuvník zaoblení za polovinu výšky tlačítka. Strany prvku pak zůstanou plně zaoblené bez ohledu na to, jak moc se změní šířka tlačítka.
Použití vygenerovaného CSS kódu
Pod náhledovým boxem se nachází sekce „CSS“, která zobrazuje výsledný kód v reálném čase. Pro rychlé použití vygenerovaného kódu stačí kliknout na tlačítko „Kopírovat CSS“. Tento kód pak můžete přímo vložit do stylopisu vašeho webového projektu k příslušnému HTML elementu.
Vykreslování a výpočty probíhají lokálně. Každý roh se vykresluje přímo ve vašem prohlížeči a nic z toho, co zde nastavíte, se neodesílá na servery BroBroGo.
Často kladené otázky
Jak fungují čtyři rohy a rozdíl mezi px a %? Čtyři posuvníky odpovídají ve směru hodinových ručiček levému hornímu, pravému hornímu, pravému dolnímu a levému dolnímu rohu. V pixelech se roh zaoblí o pevnou hodnotu; v procentech se zaoblí relativně k boxu – horizontální procento se řídí šířkou a vertikální výškou, takže 50 % změní čtverec v kruh.
K čemu slouží eliptický režim? Pokud je tato funkce vypnutá, každý roh tvoří čtvrtkruh s jediným poloměrem. Zapněte ji a každý roh získá samostatný horizontální a vertikální poloměr, což vám umožní vytvářet měkké, organické tvary „kapek“. Generátor za vás zapíše zápis se dvěma hodnotami oddělenými lomítkem a jakmile jsou rohy opět souměrné, vrátí se ke zkrácené formě.
Jak vytvořím dokonalý kruh nebo pilulku? Propojte rohy, přepněte jednotky na procenta a nastavte 50 %: ze čtverce se stane kruh. Pro tlačítko ve tvaru pilulky ponechte pixely a přetáhněte roh za polovinu výšky tlačítka – strany zůstanou plně zaoblené při jakékoli šířce. Předvolba Kruh nastaví první případ na jedno kliknutí.