CSS Squircle Generator — pyöristetty neliö
Suunnittele CSS-reunusäde visuaalisesti: neljä erillistä kulman liukusäädintä pikselinä tai prosentteina, link-all-corners-pikakuvake välittömiä ympyröitä ja pillereitä varten sekä orgaaninen blob-tila satunnaistetuilla muodoilla.
Tulos
Tämä sivu avaa reunasädegeneraattorin, jossa kaikki neljä kulmaa on linkitetty 30 %:lla. Tämä on kohtalainen pyöristys terävän neliön ja täyden ympyrän välissä. Se ei ole todellinen matemaattinen squircle (superellipsi), mutta se on lähin yksittäinen CSS-ominaisuus, jonka yksittäinen CSS-ominaisuus voi saada, ja se on arvo, johon useimmat suunnittelujärjestelmät tavoittelevat, kun he haluavat tämän ilmeen.
Nimi tulee iOS:n suosituista pyöristetyn neliön muotoisista sovelluskuvakkeista: jokaisessa kulmassa on tarpeeksi kaarevuutta, jotta se tuntuu pehmeältä ja ystävälliseltä, mutta ei koskaan niin paljon, että muoto olisi pyöreä. Ikonilaatat, korttien pikkukuvat ja modernit avatar-kehykset nojaavat kaikki samaan karkeaan säteeseen juuri tästä syystä.
Työnnä linkitettyä liukusäädintä ylöspäin saadaksesi pehmeämmän, pyöreämmän tuntuman tai alaspäin saadaksesi terävämmän, neliömäisemmän – CSS-rivi päivittyy jokaisen muutoksen myötä ja on valmis kopioimaan, kun käyrä tuntuu oikealta kuvakkeellesi tai kortillesi.