A CSS border-radius tulajdonság működése
A CSS border-radius tulajdonsága határozza meg a HTML-elemek sarkainak lekerekítését. A Border Radius generátor segítségével vizuálisan, csúszkák használatával állítható be a sarkok íve, miközben az eszköz azonnal előállítja a megfelelő CSS-kódot a webes projektekhez.
A lekerekítés mértékét alapvetően kétféle mértékegységben lehet megadni: képpontban (px) vagy százalékban (%).
- Képpont (px): Pixelben megadva a sarok egy fix sugarú körív mentén kerekedik le, függetlenül az elem tényleges méretétől.
- Százalék (%): Százalékos érték használatakor a lekerekítés mértéke az elem saját méretéhez igazodik. A vízszintes százalékos érték az elem szélességét, míg a függőleges százalékos érték az elem magasságát veszi alapul. Ez a viselkedés kulcsfontosságú a responzív dizájn kialakításakor, ahol az elemek mérete a képernyő szélességétől függően változik.
A generátor kezdeti értéke 24, amely a border-radius: 24px; CSS-kódot eredményezi.
A sarkok vezérlése és az óramutató járásának szabálya
A CSS-ben a sarkok meghatározása egy rögzített sorrendet követ. A generátor négy sarokcsúszkája az óramutató járásával megegyező irányban térképezi fel az elem sarkait, a következő sorrendben:
- Bal felső (top-left)
- Jobb felső (top-right)
- Jobb alsó (bottom-right)
- Bal alsó (bottom-left)
A kezelőfelületen a Sarkok összekapcsolása opció bekapcsolásával egyetlen, a Minden sarok feliratú csúszka szabályozza mind a négy sarkot egyszerre. Ha ezt az opciót kikapcsoljuk, a sarkok egyenként, egymástól függetlenül is beállíthatók a Bal felső, Jobb felső, Jobb alsó és Bal alsó csúszkákkal, amelyek mindegyike 0 és 100 közötti tartományban mozog.
Haladó alakzatok az elliptikus mód használatával
Amikor az Elliptikus sarkok (Elliptikus sarkok) funkció ki van kapcsolva, minden sarok egy szabályos negyedkör, amely egyetlen sugárértékkel rendelkezik. Az Elliptikus sarkok opció bekapcsolásával azonban lehetőség nyílik arra, hogy minden egyes sarokhoz külön Vízszintes és Függőleges sugarat rendeljünk.
Az elliptikus mód használatával lágyabb, organikusabb formák, úgynevezett amőba (blob) alakzatok hozhatók létre. A CSS-kódban ez a struktúra egy perjellel (/) elválasztott, kétcsoportos szintaxisként jelenik meg, ahol a perjel előtt a vízszintes sugarak, a perjel után pedig a függőleges sugarak szerepelnek. Amikor a sarkok újra szabályos körívekké válnak (a vízszintes és függőleges értékek megegyeznek), a generátor automatikusan visszatér a rövidebb, perjel nélküli CSS-formátumhoz.
Körök és kapszula alakú gombok készítése
A webdizájnban két rendkívül gyakori mintázat a tökéletes kör és a kapszula (pill-shaped) alakú gomb. Ezek az alábbi szabályok szerint hozhatók létre a generátorral:
| Kívánt alakzat | Mértékegység | Beállítási módszer | Működési elv |
|---|---|---|---|
| Tökéletes kör | Százalék (%) | Kapcsolja össze a sarkokat, és állítsa a csúszkát pontosan 50%-ra. | Egy négyzet alakú elem esetén az 50%-os érték a szélesség és a magasság feléig kerekíti a sarkokat, így az elem körré változik. |
| Kapszula alak | Képpont (px) | Tartsa meg a pixel egységet, és húzza a csúszkát az elem magasságának felénél nagyobb értékre. | A CSS specifikáció szerint a lekerekítés mértéke nem haladhatja meg az elem fizikai határait. Ha a sugár nagyobb, mint a magasság fele, a lekerekítés maximális marad, így az oldalak teljesen lekerekítettek lesznek bármilyen szélesség mellett. |
Előbeállítások használata a tervezésben
A gyorsabb munka érdekében a generátor öt különböző előbeállítást (preset) kínál gombok formájában, amelyek azonnal alkalmazzák a megfelelő értékeket a vizuális előnézetre és a generált CSS-kódra:
- Szögletes: Minden sarok lekerekítését nullára csökkenti, így éles sarkokat kapunk.
- Lekerekített: Mérsékelt, standard lekerekítést alkalmaz a sarkokon.
- Kör: A sarkok összekapcsolásával az értéket 50%-ra állítja, ami négyzet alapú elemnél kört eredményez.
- Amőba: Komplexebb, aszimmetrikus elliptikus beállításokat alkalmaz az organikus hatás érdekében.
- Levél: Két átlós sarkot élesen hagy, míg a másik két átlós sarkot erősen lekerekíti.
A generált CSS alkalmazása és adatkezelés
A generátor felületén a CSS fejléc alatt látható a valós időben frissülő kód. A CSS másolása gombra kattintva a kód a vágólapra kerül, ahonnan közvetlenül beilleszthető bármely webes stíluslapba (például egy .gomb { border-radius: 24px; } osztályon belül).
Minden sarok kirajzolása közvetlenül a böngészőjében történik. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire, így a munkafolyamat teljesen helyi környezetben fut.
Gyakran Ismételt Kérdések
Hogyan működik a négy sarok, illetve a px és a % közötti különbség?
A négy csúszka az óramutató járásával megegyező irányban a bal felső, jobb felső, jobb alsó és bal alsó sarkoknak felel meg. Képpontban (px) megadva a sarok fix mértékben kerekedik le; százalékban (%) a doboz méretéhez képest – a vízszintes százalék a szélességet, a függőleges százalék a magasságot követi, így az 50% a négyzetet körré alakítja.
Mire való az elliptikus mód?
Kikapcsolt állapotban minden sarok egyetlen sugárral rendelkező negyedkör. Ha bekapcsolja, minden sarok külön vízszintes és függőleges sugarat kap – így hozhat létre lágy, organikus „amőba” (blob) alakzatokat. A generátor automatikusan megírja a két értékből álló, perjellel elválasztott formát, és visszaáll a rövid formára, amint a sarkok újra szabályos körívekké válnak.
Hogyan készíthetek tökéletes kört vagy kapszula alakot?
Kapcsolja össze a sarkokat, váltson százalékra (%), és állítson be 50%-ot: a négyzetből ekkor kör lesz. Kapszula alakú gombhoz hagyja meg a képpontot (px), és húzza az egyik sarkot a gomb magasságának felén túlra – az oldalak így bármilyen szélességnél teljesen lekerekítettek maradnak. A Kör előbeállítás egyetlen kattintással beállítja az első esetet.