0

CSS Squircle Generator — noapaļots kvadrāts

Vizuāli noformējiet CSS apmales rādiusu: četri neatkarīgi stūra slīdņi pikseļos vai procentos, saīsne uz visiem stūriem tūlītējiem apļiem un tabletēm, kā arī organiskais lāses režīms ar nejaušām formām.

12px
12px
12px
12px
Notiek apstrāde... 0%

Rezultāts

Šajā lapā tiek atvērts apmales rādiusa ģenerators ar visiem četriem stūriem, kas saistīti ar 30%, mērenu noapaļošanu, kas atrodas starp asu kvadrātu un pilnu apli. Tā nav īsta matemātiska svira (superelipse), taču tā ir tuvākā vienam CSS rekvizītam, ko var iegūt, un tā ir vērtība, ko sasniedz lielākā daļa dizaina sistēmu, kad tās vēlas šādu izskatu.

Nosaukums cēlies no iOS popularizētajām lietotņu ikonām ar noapaļotu kvadrātu: katrā stūrī ir pietiekami daudz izliekuma, lai justos mīksts un draudzīgs, taču nekad nav tik daudz, lai forma būtu apaļa. Ikonu flīzes, kāršu sīktēli un mūsdienīgi iemiesojuma rāmji ir balstīti uz rādiusiem šajā pašā aptuvenajā diapazonā tieši šī iemesla dēļ.

Pabīdiet saistīto slīdni uz augšu, lai iegūtu maigāku, apļveida sajūtu, vai uz leju, lai iegūtu izteiksmīgāku, kvadrātiskāku — CSS rindiņa tiek atjaunināta ar katru izmaiņu un ir gatava kopēšanai, tiklīdz līkne ir piemērota jūsu ikonai vai kartītei.