⭐ 0
🔍
Text Obrázek PDF a Dokumenty Audio Hudba Elektronika Čas Užitečné programy Validátory Ezoterika Hry

CSS Squircle Generator — Zaoblený čtverec

Vizuálně navrhněte CSS border-radius: čtyři nezávislé rohové posuvníky v pixelech nebo procentech, zkratka pro okamžité kruhy a pilulky typu link-all-all, plus organický režim blob s náhodnými tvary.

12px
12px
12px
12px
Zpracování... 0%

Výsledek

Tato stránka otevře generátor poloměru ohraničení se všemi čtyřmi rohy propojenými na 30 %, což je mírné zaoblení, které se nachází mezi ostrým čtvercem a plným kruhem. Není to skutečná matematická veverka (superelipsa), ale je to nejbližší vlastnost CSS, kterou může dosáhnout, a je to hodnota, na kterou dosáhne většina návrhových systémů, když chtějí tento vzhled.

Název pochází z ikon aplikací se zaobleným čtvercem, které zpopularizoval iOS: dostatečně zakřivené v každém rohu, aby působily jemně a přátelsky, ale nikdy ne natolik, aby se tvar četl jako kulatý. Dlaždice ikon, miniatury karet a moderní rámečky avatarů se všechny opírají o poloměry ve stejném hrubém rozsahu přesně z tohoto důvodu.

Posuňte propojený posuvník nahoru pro měkčí, kruhovitější dojem nebo dolů pro ostřejší, hranatější – řádek CSS se aktualizuje s každou změnou a je připraven ke kopírování, jakmile bude křivka vhodná pro vaši ikonu nebo kartu.

🛡️
Spuštěno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijaté formáty a pravidla

  • Režim rohů: nezávislé posuvníky poloměru vlevo nahoře, vpravo nahoře, vpravo dole a vlevo dole, každý přepínatelný mezi jednotkami px a procenty.
  • Zaškrtávací políčko Propojit všechny rohy, které ovládá každý roh jedním posuvníkem, plus šachovnicový náhled na světlém nebo tmavém pozadí, takže oříznuté rohy zůstanou viditelné.
  • Režim blob s tlačítkem Randomize, které vytváří organické tvary se syntaxí lomítka s osmi hodnotami, zobrazené velké a připravené ke kopírování jako CSS.

Hlavní výhody

✓ Každý posuvník okamžitě aktualizuje živý náhled a řádek CSS, takže nikdy nebudete muset hádat, jak ve skutečnosti vypadá 12px 40% 8px 24%.
✓ Zkratka pro všechny rohy změní jeden posuvník na dokonalý kruh, pilulku nebo veverku, aniž byste se rukou dotkli ostatních tří rohů.
✓ Režim blob generuje organické, randomizované tvary se syntaxí CSS s osmi hodnotami lomítka – vzhled, který nikdy nemůže vytvořit jediná hodnota border-radius.

Případy použití

  • • Vytočte čtyři poloměry rohů karty nezávisle — zaokrouhlete pouze horní část rozevíracího panelu nebo pouze jednu stranu karty.
  • • Propojte všechny čtyři rohy s jedním posuvníkem a vytvořte během několika sekund dokonalý kruh, tlačítko pilulky ve tvaru stadionu nebo veverku ve stylu iOS.
  • • Přepněte do režimu blob a stiskněte Randomize, dokud organický tvar nezapadne do prázdného prostoru za obrázkem hrdiny nebo avatarem, poté zkopírujte CSS.