CSS Squircle Generator – Lekerekített négyzet
Tervezze meg a CSS szegélysugárát vizuálisan: négy független sarokcsúszka képpontban vagy százalékban, egy link-all-corners parancsikon az azonnali körökhöz és pirulákhoz, valamint egy organikus blob mód véletlenszerű alakzatokkal.
Eredmény
Ez az oldal megnyitja a szegélysugár generátort úgy, hogy mind a négy sarka 30%-ban összekapcsolódik, mérsékelt lekerekítéssel, amely egy éles négyzet és egy teljes kör között helyezkedik el. Ez nem egy igazi matematikai squircle (szuperellipszis), de ez a legközelebbi egyetlen CSS-tulajdonsághoz, és ez az az érték, amelyhez a legtöbb tervezőrendszer elér, amikor ezt a megjelenést akarja.
A név az iOS által népszerűsített, lekerekített négyzet alakú alkalmazásikonokból származik: minden sarkon elég görbe, hogy puha és barátságos legyen, de soha nem annyira, hogy a forma kereknek tűnjön. Az ikonlapkák, a kártyabélyegképek és a modern avatarkeretek pontosan ezért támaszkodnak ugyanabban a durva tartományban lévő sugarakra.
Tolja felfelé az összekapcsolt csúszkát, ha lágyabb, körkörösebb érzést szeretne, vagy lefelé, ha élesebb, négyzetesebb érzetet szeretne elérni – a CSS-sor minden változtatáskor frissül, és készen áll a másolásra, amint a görbe megfelel az ikonjának vagy kártyájának.