CSS Squircle Generator — Zaoblený štvorec
Vizuálne navrhnite polomer okraja CSS: štyri nezávislé rohové posúvače v pixeloch alebo percentách, skratka pre okamžité kruhy a pilulky pre všetky rohy, plus režim organických škvŕn s náhodnými tvarmi.
Výsledok
Táto stránka otvorí generátor polomeru ohraničenia so všetkými štyrmi rohmi spojenými na 30 %, mierne zaoblenie, ktoré sa nachádza medzi ostrým štvorcom a plným kruhom. Nie je to skutočná matematická veverička (superelipsa), ale je to najbližšia, aká sa môže približovať jedinej vlastnosti CSS, a je to hodnota, po ktorej siaha väčšina dizajnových systémov, keď chcú tento vzhľad.
Názov pochádza zo zaoblených štvorcových ikon aplikácií, ktoré spopularizoval iOS: dostatočná krivka na každom rohu, aby pôsobil jemne a priateľsky, ale nikdy nie natoľko, aby sa tvar čítal ako okrúhly. Dlaždice ikon, miniatúry kariet a moderné rámy avatarov sa presne z tohto dôvodu opierajú o polomery v rovnakom hrubom rozsahu.
Posuňte prepojený posúvač nahor pre jemnejší, kruhovitejší pocit alebo nadol pre ostrejší, hranatejší – čiara CSS sa aktualizuje pri každej zmene a je pripravená na kopírovanie, keď bude krivka vhodná pre vašu ikonu alebo kartu.