⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore di forme di pillola/stadio CSS

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.

12px
12px
12px
12px
Elaborazione... 0%

Risultato

Questa pagina apre il generatore del raggio del bordo con tutti e quattro gli angoli collegati e spinti su un raggio molto ampio: 999px. Su un tipico rettangolo delle dimensioni di un pulsante, un raggio così grande viene ritagliato dal browser esattamente alla metà dell'altezza della scatola, che è ciò che produce la forma di una pillola o di uno stadio completamente arrotondata anziché un quadrato con angoli leggermente arrotondati.

Questo è il motivo per cui i pulsanti della pillola non necessitano di un valore di raggio preciso sintonizzato sull'altezza di ciascun pulsante: qualsiasi numero comodamente più grande della metà dell'altezza dà lo stesso risultato ritagliato, che è anche il motivo per cui 999px (o anche 9999px) è diventata la scorciatoia informale della comunità per "girare tutto intorno" nei CSS.

Ridimensiona la casella nel tuo layout e gli stessi 999px continueranno a produrre una pillola intera a qualsiasi altezza, poiché il browser si aggancia sempre automaticamente a metà della casella. Copia il CSS una volta che sembra corretto oppure scollega gli angoli per costruire invece una capsula asimmetrica.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Modalità angoli: cursori del raggio indipendenti in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra, ciascuno commutabile tra unità px e percentuali.
  • Casella di controllo Collega tutti gli angoli che guida ogni angolo da un cursore, oltre a un'anteprima a scacchiera su uno sfondo chiaro o scuro in modo che gli angoli ritagliati rimangano visibili.
  • Modalità BLOB con un pulsante Randomizza che crea forme organiche con sintassi barrata a otto valori, mostrate grandi e pronte per essere copiate come CSS.

Vantaggi principali

✓ Ogni dispositivo di scorrimento aggiorna istantaneamente l'anteprima live e la linea CSS, quindi non devi mai indovinare come appaiono effettivamente 12px 40% 8px 24%.
✓ La scorciatoia Collega tutti gli angoli trasforma uno slider in un cerchio, una pillola o uno squircle perfetto senza toccare manualmente gli altri tre angoli.
✓ La modalità Blob genera forme organiche e casuali con la sintassi della barra a otto valori CSS: un aspetto che un singolo valore del raggio del bordo non potrà mai produrre.

Casi d'uso

  • • Componi i raggi dei quattro angoli di una carta in modo indipendente: attorno solo alla parte superiore di un pannello a discesa o solo a un lato di una scheda.
  • • Collega tutti e quattro gli angoli a un cursore per creare in pochi secondi un cerchio perfetto, un pulsante pillola a forma di stadio o uno squircle in stile iOS.
  • • Passa alla modalità blob e premi Randomizza finché una forma organica non si adatta allo spazio vuoto dietro l'immagine di un eroe o un avatar, quindi copia il CSS.