Generatore di Squircle CSS: quadrato arrotondato
Progetta visivamente il raggio del bordo CSS: quattro cursori angolari indipendenti in px o percentuale, una scorciatoia collega tutti gli angoli per cerchi e pillole istantanei, oltre a una modalità blob organica con forme casuali.
Risultato
Questa pagina apre il generatore del raggio del bordo con tutti e quattro gli angoli collegati al 30%, un arrotondamento moderato che si trova tra un quadrato acuto e un cerchio completo. Non è un vero e proprio squircle matematico (una superellisse), ma è il massimo che una singola proprietà CSS può ottenere, ed è il valore a cui la maggior parte dei sistemi di progettazione si rivolge quando desiderano quell'aspetto.
Il nome deriva dalle icone delle app quadrate e arrotondate rese popolari da iOS: abbastanza curva su ogni angolo per sembrare morbida e amichevole, ma mai così tanto da far sembrare la forma rotonda. Le tessere delle icone, le miniature delle carte e le moderne cornici degli avatar si basano tutti su raggi in questo stesso intervallo approssimativo esattamente per questo motivo.
Spingi il cursore collegato verso l'alto per una sensazione più morbida e circolare o verso il basso per una sensazione più nitida e quadrata: la linea CSS si aggiorna con ogni modifica, pronta per essere copiata una volta che la curva risulta adatta alla tua icona o carta.