Generator zaobljenih vogalov (border-radius)

Kako uporabljati generator zaobljenih vogalov

1. Povleci pike na robovih predogleda. Vsaka barvna pika določa vodoravni polmer enega vogala; ko je vklopljena možnost Eliptični vogali (8 vrednosti), bele pike določajo navpične polmere.
2. Lahko pa natančne vrednosti vneseš v razdelku Vogali: Zgoraj levo, Zgoraj desno, Spodaj desno in Spodaj levo, vsak s poljem Vodoravno in poljem Navpično.
3. Izberi Enota: % (odstotek okvirja) ali px (slikovne pike). Pri preklopu se trenutne vrednosti pretvorijo, tako da oblika ostane enaka.
4. Nastavi Širina okvirja (px) in Višina okvirja (px), da ustrezata tvojemu elementu, z možnostjo Vsi vogali pa zaobliš vse vogale naenkrat.
5. Preizkusi Predloge (Zaobljeno, Tableta, Krog, List, Kaplja, Jajce, Vstopnica in tri oblike madežev) ali klikni Naključni madež za organsko obliko.
6. Vklopi Razširjene lastnosti, če imaš raje štiri deklaracije border-*-radius, nato kodo Koda CSS kopiraš z gumbom Kopiraj.

Tipkovnica: izberi piko in s smernimi tipkami spremeniš njen polmer za en korak (s Shiftom za 10).

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Sintaksa lastnosti border-radius

Lastnost border-radius sprejme od ene do štirih vrednosti v vrstnem redu: zgoraj levo, zgoraj desno, spodaj desno, spodaj levo. Podobno kot pri robovih se manjkajoče vrednosti prevzamejo iz nasprotnega vogala: border-radius: 10px 20px zaobli zgoraj levo in spodaj desno z 10px, ostala dva pa z 20px. Orodje vedno zapiše najkrajšo enakovredno obliko.

Vsak vogal je pravzaprav četrtina elipse z dvema polmeroma. Poševnica loči vodoravne polmere od navpičnih, kar da do osem vrednosti:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Pred poševnico so vodoravni polmeri štirih vogalov, za njo navpični. Kadar sta seznama enaka, se del s poševnico izpusti.

Slikovne pike ali odstotki?

• px da enako krivuljo ne glede na velikost elementa. To je prava izbira za gumbe, kartice in vnosna polja: border-radius: 8px.
• % je relativen glede na element: vodoravni polmeri na njegovo širino, navpični na njegovo višino. 50% spremeni kvadrat v krog, pravokotnik pa v elipso. Odstotki omogočajo, da se oblike madežev skalirajo skupaj z elementom.

Za gumb v obliki tablete uporabi polmer v slikovnih pikah, ki je vsaj polovica višine. Predloga Tableta to naredi ravno za vneseno velikost okvirja; deluje tudi velika vrednost, na primer 999px.

Kadar vsota sosednjih polmerov presega stranico, ki si jo delita, brskalniki vse polmere sorazmerno zmanjšajo, dokler se ne prilegajo. Zato se oblika ne pokvari, če dva ročaja povlečeš čez drugega.

Oblike madežev

Predloge madežev in Naključni madež uporabljajo osem odstotkov, pri katerih se vsota obeh ročajev na posamezni strani ujema s 100 %. Krivulje se tako natančno stikajo, oblika pa je videti kot gladek kamenček. Med dvema madežema lahko ustvariš »pretapljanje« s CSS-prehodom (transition) na lastnosti border-radius.