Kampų apvalinimo (border-radius) generatorius

Apvalinkite kiekvieną kampą šliaužikliais, kurkite organines formas elipsiniu režimu ir akimirksniu nukopijuokite CSS.

Išankstiniai nustatymai
Kampai
Visi kampai
24px
CSS
Vilkite šliaužiklius, kad suapvalintumėte kampus.

Kiekvienas kampas braižomas tiesiog jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“.

DUK

Kaip veikia keturi kampai ir kuo skiriasi px bei %?

Keturi šliaužikliai pagal laikrodžio rodyklę atitinka viršutinį kairįjį, viršutinį dešinįjį, apatinį dešinįjį ir apatinį kairįjį kampus. Pasirinkus pikselius, kampas apvalinamas fiksuotu dydžiu; pasirinkus procentus, jis apvalinamas proporcingai rėmeliui – horizontalus procentas skaičiuojamas nuo pločio, o vertikalus – nuo aukščio, todėl 50% paverčia kvadratą apskritimu.

Ką daro elipsinis režimas?

Kai ši funkcija išjungta, kiekvienas kampas yra ketvirtadalis apskritimo su vienu spinduliu. Ją įjungus, kiekvienas kampas įgyja atskirą horizontalų ir vertikalų spindulį – taip kuriami švelnūs, organiški „lašelio“ (angl. blob) pavidalai. Generatorius užrašys dviejų reikšmių formą su pasviruoju brūkšniu, o kampams vėl tapus apvaliems grįš prie trumposios formos.

Kaip sukurti tobulą apskritimą arba piliulės formą?

Sujunkite kampus, perjunkite į procentus ir nustatykite 50%: kvadratas taps apskritimu. Jei norite gauti piliulės formos mygtuką, palikite pikselius ir patraukite kampą daugiau nei per pusę mygtuko aukščio – šonai liks visiškai suapvalinti bet kokiu pločiu. „Apskritimo“ išankstinis nustatymas tai sukonfigūruoja vienu spustelėjimu.

CSS Cubic Bezier generatoriusVilkite dvi rankenėles, kad suformuotumėte animacijos kreivę, stebėkite judantį tašką ir nukopijuokite cubic-bezier() reikšmę.Elementų šešėlių (box-shadow) generatoriusVilkite šliaužiklius, kad suformuotumėte šešėlį, sluoksniuokite juos gyliui išgauti ir akimirksniu nukopijuokite paruoštą CSS.Gradientų generatoriusKurkite tiesinius, radialinius ar kūginius gradientus, pridėkite spalvų taškus, nustatykite kryptį ir nukopijuokite CSS vienu spustelėjimu.Flexbox generatoriusKonfigūruokite flex konteinerį ir jo elementus vizualiais valdikliais, stebėkite išdėstymą gyvai ir nukopijuokite CSS vienu spustelėjimu.CSS Grid generatoriusNustatykite stulpelius ir eilutes, vilkite per langelius elementams išdėstyti ir vienu spustelėjimu nukopijuokite tinklelio CSS bei atitinkamą HTML.CSS clamp() skaičiuoklėĮveskite dydį mažiems ir dideliems ekranams ir gaukite kintančią clamp() reikšmę, kuri sklandžiai prisitaiko – šriftams, paraštėms ar tarpams.Spalvų konverterisKonvertuokite spalvas tarp HEX, RGB, HSL, HSV, CMYK ir LAB – redaguokite bet kurį lauką, o kiti atsinaujins automatiškai.