Generator Squircle CSS — zaokrąglony kwadrat
Wizualnie zaprojektuj promień obramowania CSS: cztery niezależne suwaki narożne w pikselach lub procentach, skrót łączący wszystkie rogi do natychmiastowych okręgów i pigułek, a także tryb organicznego obiektu typu blob z losowymi kształtami.
Wynik
Ta strona otwiera generator promieni obramowania ze wszystkimi czterema narożnikami połączonymi w stopniu 30%, co stanowi umiarkowane zaokrąglenie mieszczące się pomiędzy ostrym kwadratem a pełnym okręgiem. Nie jest to prawdziwy matematyczny zakręt (superelipsa), ale jest najbliższy pojedynczej właściwości CSS i jest to wartość, do której sięga większość systemów projektowych, gdy chce uzyskać taki wygląd.
Nazwa pochodzi od ikon aplikacji o zaokrąglonych kwadratach, spopularyzowanych przez iOS: wystarczająco dużo zaokrągleń w każdym rogu, aby czuć się miękko i przyjaźnie, ale nigdy tak bardzo, aby kształt wydawał się okrągły. Z tego właśnie powodu kafelki ikon, miniatury kart i nowoczesne ramki awatarów opierają się na promieniach w tym samym przybliżonym zakresie.
Przesuń połączony suwak w górę, aby uzyskać bardziej miękki, bardziej okrągły efekt, lub w dół, aby uzyskać wyraźniejszy, bardziej kwadratowy — linia CSS aktualizuje się przy każdej zmianie i jest gotowa do skopiowania, gdy krzywa będzie odpowiednia dla Twojej ikony lub karty.