⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

CSS Squircle Generator – suapvalintas kvadratas

Sukurkite CSS kraštinės spindulį vizualiai: keturi nepriklausomi kampiniai slankikliai pikseliais arba procentais, visų kampų nuoroda, skirta momentiniams apskritimams ir piliulei, taip pat natūralus dėmės režimas su atsitiktinių formų formomis.

12px
12px
12px
12px
Apdorojama... 0%

Rezultatas

Šiame puslapyje atidaromas kraštinės spindulio generatorius su visais keturiais kampais, susietais 30%, vidutiniu apvalinimu, kuris yra tarp aštraus kvadrato ir viso apskritimo. Tai nėra tikra matematinė svirtelė (superelipsė), tačiau ji yra arčiausiai vienos CSS savybės, ir tai yra vertė, kurios dauguma projektavimo sistemų siekia, kai nori tokios išvaizdos.

Pavadinimas kilęs iš apvalių kvadratų programos piktogramų, kurias išpopuliarino iOS: pakankamai kreivės kiekviename kampe, kad jaustumėtės švelnūs ir draugiški, bet niekada tiek, kad forma būtų apvali. Piktogramų plytelės, kortelių miniatiūros ir šiuolaikiniai pseudoportretų rėmeliai remiasi tame pačiame apytikriame diapazone būtent dėl ​​šios priežasties.

Pastumkite susietą slankiklį aukštyn, kad pojūtis būtų švelnesnis, apskritesnis, arba žemyn, kad būtų aiškesnis, kvadratiškesnis – CSS eilutė atnaujinama su kiekvienu pakeitimu ir paruošta kopijuoti, kai tik kreivė tinka jūsų piktogramai ar kortelei.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • Kampų režimas: nepriklausomi viršutinio kairiojo, viršutinio dešiniojo, apatinio dešiniojo ir apatinio kairiojo spindulio slankikliai, kiekvienas perjungiamas tarp pikselių ir procentų vienetų.
  • Žymimasis langelis „Susieti visus kampus“, kuris perkelia kiekvieną kampą vienu slankikliu, taip pat šachmatų lentelės peržiūra šviesiame arba tamsiame fone, kad nukirpti kampai liktų matomi.
  • Blob režimas su Atsitiktinio nustatymo mygtuku, kuris sukuria natūralias aštuonių reikšmių pasvirojo brūkšnio sintaksės formas, rodomas dideles ir paruoštas kopijuoti kaip CSS.

Pagrindiniai privalumai

✓ Kiekvienas slankiklis akimirksniu atnaujina tiesioginę peržiūrą ir CSS eilutę, todėl jums niekada nereikės spėlioti, kaip iš tikrųjų atrodo 12px 40% 8px 24%.
✓ Spartusis nuorodas į visus kampus vieną slankiklį paverčia tobulu apskritimu, piliulėliu ar svirtele, neliesdami kitų trijų kampų ranka.
✓ Blob režimas generuoja natūralias, atsitiktine tvarka pasirinktas formas, naudodamas CSS aštuonių reikšmių pasvirojo brūkšnio sintaksę – žvilgsnio, kurio niekada negali sukurti vienos kraštinės spindulio vertė.

Naudojimo atvejai

  • • Nepriklausomai surinkite keturis kortelės kampų spindulius – apvalinkite tik išskleidžiamojo skydelio viršų arba tik vieną skirtuko pusę.
  • • Susiekite visus keturis kampus su vienu slankikliu, kad per kelias sekundes sukurtumėte tobulą apskritimą, stadiono formos piliulės mygtuką arba iOS stiliaus svirtį.
  • • Perjunkite į blob režimą ir paspauskite Atsitiktinis, kol natūrali forma tilps tuščioje erdvėje už herojaus atvaizdo ar pseudoportreto, tada nukopijuokite CSS.