CSS Squircle Generator — zaobljeni kvadrat
Vizualno dizajnirajte radijus obruba CSS-a: četiri nezavisna kutna klizača u pikselima ili postocima, prečac povezivanja svih kutova za trenutne krugove i pilule, plus način organske mrlje s nasumičnim oblicima.
Rezultat
Ova stranica otvara generator radijusa granice sa sva četiri kuta povezana na 30%, umjereno zaokruživanje koje se nalazi između oštrog kvadrata i punog kruga. To nije prava matematička vijuga (superelipsa), ali je najbliže što jedno svojstvo CSS-a može dobiti i to je vrijednost za kojom većina dizajnerskih sustava poseže kada želi takav izgled.
Naziv dolazi od zaobljenih četvrtastih ikona aplikacija koje je popularizirao iOS: dovoljno zaobljenih na svakom kutu da se osjećaju meko i prijateljski, ali nikad toliko da se oblik čita kao okrugao. Pločice ikona, minijature kartica i moderni okviri avatara oslanjaju se na radijuse u istom grubom rasponu upravo iz tog razloga.
Gurnite povezani klizač prema gore za mekši, kružniji dojam ili prema dolje za oštriji, kvadratniji — CSS redak se ažurira sa svakom promjenom, spreman za kopiranje kada krivulja bude odgovarajuća za vašu ikonu ili karticu.