CSS Squircle Generator — avrundet firkant
Design CSS-kantradius visuelt: fire uavhengige hjørneglidere i px eller prosent, en lenke-alle-hjørner-snarvei for øyeblikkelige sirkler og piller, pluss en organisk blob-modus med randomiserte former.
Resultat
Denne siden åpner kant-radius-generatoren med alle fire hjørner koblet til 30 %, en moderat avrunding som sitter mellom en skarp firkant og en hel sirkel. Det er ikke en ekte matematisk squircle (en superellipse), men det er det nærmeste en enkelt CSS-egenskap kan komme, og det er verdien de fleste designsystemer når når de vil ha det utseendet.
Navnet kommer fra de avrundede firkantede appikonene som er populært av iOS: nok kurve på hvert hjørne til å føles mykt og vennlig, men aldri så mye at formen er rund. Ikonfliser, kortminiatyrbilder og moderne avatarrammer lener seg alle på radier i det samme grove området av akkurat den grunn.
Skyv den koblede glidebryteren opp for en mykere, mer sirkulær følelse eller ned for en skarpere, mer firkantet en - CSS-linjen oppdateres med hver endring, klar til å kopiere når kurven føles riktig for ikonet eller kortet ditt.