Generator border-radiusa

Kako koristiti generator border-radiusa

1. Povuci točke na rubovima pregleda. Svaka obojena točka određuje vodoravni polumjer jednog kuta; kad je uključeno Eliptični kutovi (8 vrijednosti), bijele točke određuju okomite polumjere.
2. Ili upiši točne vrijednosti u Kutovi: Gore lijevo, Gore desno, Dolje desno i Dolje lijevo, svaki s poljem Vodoravno i poljem Okomito.
3. Odaberi Jedinicu: % (postotak okvira) ili px (pikseli). Promjena jedinice pretvara trenutačne vrijednosti pa oblik ostaje isti.
4. Postavi Širinu okvira (px) i Visinu okvira (px) prema svom elementu, a Svi kutovi zaoblja sve kutove odjednom.
5. Isprobaj Predloške (Zaobljeno, Tableta, Krug, List, Kap, Jaje, Ulaznica i tri bloba) ili klikni Nasumični blob za organski oblik.
6. Uključi Zasebna svojstva ako želiš četiri deklaracije border-*-radius, a zatim kopiraj CSS kod gumbom Kopiraj.

Tipkovnica: postavi fokus na točku i tipkama sa strelicama promijeni njezin polumjer za jedan korak (10 uz Shift).

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na poslužitelj.

Sintaksa svojstva border-radius

border-radius prima od jedne do četiri vrijednosti, redom: gore lijevo, gore desno, dolje desno, dolje lijevo. Kao kod margina, vrijednosti koje nedostaju preuzimaju se od nasuprotnog kuta: border-radius: 10px 20px zaobljuje gore lijevo i dolje desno s 10px, a ostala dva kuta s 20px. Alat uvijek zapisuje najkraći ekvivalentan oblik.

Svaki je kut zapravo četvrtina elipse s dva polumjera. Kosa crta odvaja vodoravne polumjere od okomitih, što daje do osam vrijednosti:

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

Prije kose crte su vodoravni polumjeri četiriju kutova, a poslije nje okomiti. Kad su oba popisa jednaka, dio iza kose crte se izostavlja.

Pikseli ili postoci?

• px daje istu krivulju bez obzira na veličinu elementa. Pravi je izbor za gumbe, kartice i polja za unos: border-radius: 8px.
• % je relativan prema elementu: vodoravni polumjeri prema njegovoj širini, okomiti prema visini. 50% pretvara kvadrat u krug, a pravokutnik u elipsu. Zahvaljujući postocima blob oblici se skaliraju zajedno s elementom.

Za gumb oblika tablete upotrijebi polumjer u pikselima od barem pola visine. Predložak Tableta radi upravo to za veličinu okvira koju si upisao; funkcionira i golema vrijednost poput 999px.

Kad susjedni polumjeri zajedno premašuju stranicu koju dijele, preglednici proporcionalno smanjuju sve polumjere dok se ne uklope. Zato povlačenje dviju točaka jedne preko druge ne kvari oblik.

Blob oblici

Predlošci bloba i Nasumični blob koriste osam postotaka kod kojih se dvije točke na svakoj strani zbrajaju u 100 %. Krivulje se tada točno spajaju, a oblik izgleda poput glatkog oblutka. Između dva bloba možeš napraviti animaciju pomoću CSS-a transition na border-radius za učinak „morfiranja“.