⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

CSS Squircle Generator – ümar ruut

Kujundage CSS-i piiriraadiust visuaalselt: neli sõltumatut nurgaliugurit pikslites või protsentides, link-all-corners otsetee vahetute ringide ja pillide jaoks ning orgaaniline blob-režiim juhuslike kujunditega.

12px
12px
12px
12px
Töötlemine... 0%

Tulemus

See leht avab äärise raadiuse generaatori, mille kõik neli nurka on lingitud 30%, mõõdukas ümardus, mis jääb terava ruudu ja täisringi vahele. See ei ole tõeline matemaatiline squircle (superellipsi), kuid see on lähim, mida üks CSS-i atribuut võib saada, ja see on väärtus, mille poole enamik disainisüsteeme seda välimust soovivad.

Nimi pärineb iOS-i poolt populariseeritud ümarate ruudukujuliste rakenduste ikoonidest: igas nurgas on piisavalt kõverat, et tunda end pehme ja sõbralikuna, kuid mitte kunagi nii, et kuju oleks ümar. Ikooniplaadid, kaartide pisipildid ja moodsad avatariraamid toetuvad täpselt sel põhjusel raadiustele samas jämedas vahemikus.

Nihutage lingitud liugurit üles, et saada pehmem ja ringikujuline tunne, või alla, et saada teravam ja ruudukujulisem – CSS-i rida värskendatakse iga muudatusega ja on valmis kopeerima, kui kõver tundub teie ikooni või kaardi jaoks õige.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Nurkade režiim: sõltumatud üleval-vasak-, üleval-paremal-, all-paremal- ja all-vasakpoolsed raadiuse liugurid, millest igaüks on vahetatav piksli ja protsendi ühikute vahel.
  • Link-all-corners märkeruut, mis juhib iga nurga ühest liugurist, pluss malelaua eelvaade heledal või tumedal taustal, nii et kärbitud nurgad jäävad nähtavaks.
  • Blob-režiim nupuga Juhuslikuks muutmine, mis loob orgaanilisi kaheksa väärtusega kaldkriipsu süntaksi kujundeid, mis on kuvatud suurena ja valmis kopeerimiseks CSS-ina.

Peamised eelised

✓ Iga liugur värskendab otseülekannet ja CSS-i rida koheselt, nii et te ei pea kunagi arvama, milline 12px 40% 8px 24% tegelikult välja näeb.
✓ Link-all-corners otsetee muudab ühe liuguri täiuslikuks ringiks, pilliks või squirkliks ilma ülejäänud kolme nurka käsitsi puudutamata.
✓ Blob-režiim genereerib orgaanilisi, juhuslikult valitud kujundeid CSS-i kaheksa väärtusega kaldkriipsu süntaksiga – välimus, mida üks piiriraadiuse väärtus ei suuda kunagi luua.

Kasutusjuhtumid

  • • Sisestage kaardi neli nurgaraadiust sõltumatult – ümardage ainult rippmenüü paneeli ülaosa või ainult vahelehe üks külg.
  • • Ühendage kõik neli nurka ühe liuguriga, et luua sekunditega täiuslik ring, staadionikujuline pillinupp või iOS-i stiilis squirling.
  • • Lülitage blob-režiimi ja vajutage nuppu Juhuslik, kuni kangelase kujutise või avatari taga olevale tühjale kohale mahub orgaaniline kujund, seejärel kopeerige CSS.