Generator border-radius

Kako koristiti generator border-radius

1. Prevuci tačke na ivicama pregleda. Svaka obojena tačka postavlja horizontalni radijus jednog ugla; kad je uključeno Eliptični uglovi (8 vrijednosti), bijele tačke postavljaju vertikalne radijuse.
2. Ili upiši tačne vrijednosti u dijelu Uglovi: Gore lijevo, Gore desno, Dolje desno i Dolje lijevo, svaki sa poljem Horizontalno i Vertikalno.
3. Odaberi Jedinica: % (postotak okvira) ili px (pikseli). Promjena jedinice pretvara trenutne vrijednosti, pa oblik ostaje isti.
4. Postavi Širina okvira (px) i Visina okvira (px) prema svom elementu, a Svi uglovi koristi da zaobliš sve uglove odjednom.
5. Isprobaj Predlošci (Zaobljeno, Tableta, Krug, List, Kap, Jaje, Karta i tri bloba) ili klikni Nasumični blob za organski oblik.
6. Uključi Pojedinačna svojstva ako više voliš četiri deklaracije border-*-radius, pa kopiraj CSS kôd dugmetom Kopiraj.

Tastatura: fokusiraj tačku i pritisni tipke sa strelicama da promijeniš njen radijus za jedan korak (10 uz Shift).

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

Sintaksa svojstva border-radius

border-radius prima od jedne do četiri vrijednosti, redom: gore lijevo, gore desno, dolje desno, dolje lijevo. Kao i kod margina, vrijednosti koje nedostaju preuzimaju se sa suprotnog ugla: border-radius: 10px 20px zaobljava gornji lijevi i donji desni ugao sa 10px, a druga dva sa 20px. Alat uvijek ispisuje najkraći ekvivalentni oblik.

Svaki ugao je zapravo četvrtina elipse sa dva radijusa. Kosa crta odvaja horizontalne radijuse od vertikalnih, što daje do osam vrijednosti:

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

Prije kose crte su horizontalni radijusi četiri ugla, a poslije nje vertikalni. Kad su obje liste jednake, dio nakon kose crte se izostavlja.

Pikseli ili postoci?

• px daje istu krivinu bez obzira na veličinu elementa. To je pravi izbor za dugmad, kartice i polja za unos: border-radius: 8px.
• % je relativan prema elementu: horizontalni radijusi prema njegovoj širini, a vertikalni prema visini. 50% pretvara kvadrat u krug, a pravougaonik u elipsu. Upravo postoci omogućavaju da se blob oblici skaliraju sa elementom.

Za dugme oblika tablete koristi radijus u pikselima od najmanje pola visine. Predložak Tableta radi upravo to za veličinu okvira koju si unio, a radi i ogromna vrijednost poput 999px.

Kad susjedni radijusi zajedno premašuju stranicu koju dijele, preglednici sve radijuse proporcionalno smanje dok se ne uklope. Zato se oblik ne kvari ni kad dvije tačke prevučeš jednu preko druge.

Blob oblici

Blob predlošci i Nasumični blob koriste osam postotaka kod kojih se dvije tačke na svakoj strani zbrajaju u 100 %. Krivine se tada savršeno spajaju i oblik izgleda kao glatki kamenčić. Između dva bloba možeš napraviti animaciju „morfiranja“ CSS-om transition na svojstvu border-radius.