Orgaaninen CSS Blob Shape Generator
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äteen generaattorin suoraan blob-tilassa, jossa orgaaninen muoto on jo ladattu: ei neliömäisiä kulmia, ei täydellistä ympyrää, vain pehmeä epäsäännöllinen ääriviiva, joka on rakennettu pelkästä CSS:stä. Napsauta Randomize milloin tahansa saadaksesi uuden muunnelman.
Jokaisen CSS-blobin takana oleva temppu on kahdeksan arvon vinoviivasyntaksi: border-radius hyväksyy kaksi neljän prosenttiosuuden sarjaa, jotka on erotettu vinoviivalla, joista ensimmäinen kaaree vaakasuorat säteet ja toinen pystysuorat. Kahden joukon yhteensopimattomuus on juuri se, mikä rikkoo tavallisen pyöristetyn suorakulmion symmetrian orgaanisiksi ääriviivoiksi.
Tämänkaltaiset blobit täyttävät tyhjän tilan sankarikuvien, avatarien ja kuvien takana lukemattomilla moderneilla aloitussivuilla juuri siksi, että kirjastoa tai SVG-vientiä ei tarvita – se on neljä riviä CSS:ää. Kopioi nykyinen muoto tai jatka satunnaistamista, kunnes jokin tuntuu sopivalta asetteluasi.