Border Radius -generaattori

Border-radius-määrittely voi ottaa vastaan enintään neljä itsenäistä kulma-arvoa sekä valinnaisen kahdeksan arvon kauttaviivasyntaksin orgaanisille kaarille – siinä on enemmän liikkuvia osia kuin useimmat tajuavat, kunnes he tarvitsevat jotain yksinkertaisen pyöristetyn kortin lisäksi. Tämä generaattori asettaa jokaisen näistä osista näytölle: neljä kulman liukusäädintä omalla px- tai prosenttiyksiköllään, linkitä kaikki kulmat -pikatoiminto symmetrisille muodoille ja blob-tila muodoille, joita yksikään säteen arvo ei voi ilmentää.

Kulmat-tila kattaa muodot, joita ihmiset todella käyttävät: linkitä kaikki kulmat yhteen liukusäätimeen täydellisiä ympyröitä, pillereitä ja squirclejä varten, tai irrota ne pyöristääksesi vain pudotusvalikon yläosan tai kortin yhden sivun. Shakkilautaesikatselu muodon takana, vaihdettavissa vaaleaan tai tummaan taustaan, tekee selväksi, mitkä kulmat leikkautuvat pois kullakin säteellä – sama visuaalinen temppu, jota tämän sivuston tiedostotyökalut käyttävät läpinäkyvyyden näyttämiseen.

Blob-tila on toinen puoli: CSS:n kahdeksan arvon kauttaviivasyntaksi sallii jokaisen kulman vaaka- ja pystysäteiden poiketa toisistaan, mikä muuttaa pyöristetyn suorakulmion orgaaniseksi, epäsäännölliseksi ääriviivaksi. Paina Satunnaista milloin tahansa saadaksesi uuden muodon ja kopioi sen taustalla oleva tarkka CSS – ei SVG-vientiä tai ulkoista kirjastoa. Esiasetussivut kattavat pyynnöt, joita ihmiset todella kirjoittavat hakukenttään: täydellinen ympyrä, stadionin muotoinen pilleripainike, iOS-tyylinen squircle ja valmis orgaaninen blob.

Kuten jokainen tämän sivuston työkalu, se toimii täysin selaimessasi: ei tiedostojen lähetystä, ei tiliä, ja generaattori jatkaa toimintaansa offline-tilassa, kun sivu on kerran ladattu.