Generatore di stili per barra di scorrimento CSS
Genera proprietà CSS ::-webkit-scrollbar e scrollbar-width/scrollbar-color personalizzate.
Generatore di stili per barra di scorrimento CSS
La barra di scorrimento predefinita del browser raramente corrisponde al resto del design, e personalizzarla significa ricordare due specifiche diverse contemporaneamente: gli pseudo-elementi ::-webkit-scrollbar di WebKit che Chrome, Safari e Edge usano, e le proprietà standard scrollbar-width/scrollbar-color che Firefox legge. Questo strumento genera entrambi contemporaneamente da poche opzioni, quindi copi un blocco CSS e ogni browser principale renderizza una barra di scorrimento corrispondente.
Imposta un selettore di destinazione —body per l'intera pagina, o una classe come .sidebar per un pannello scorrevole— quindi scegli la larghezza della barra di scorrimento in pixel, i colori della traccia e della manopola, e il colore che la manopola cambia al passaggio. L'arrotondamento della manopola controlla il border-radius della barra trascinabile, e il bordo interno aggiunge uno spazio trasparente tra la manopola e la traccia per farla leggere come una pillola flottante invece di un blocco solido. L'opzione Variante passa dalla barra di scorrimento normale del browser, a una più sottile "sottile", e "nascosto", che rimuove completamente la barra con -ms-overflow-style e scrollbar-width: none mentre mantiene lo scorrimento proprio dell'elemento.
L'attivazione della variante modalità scura racchiude una seconda copia delle regole in un blocco @media (prefers-color-scheme: dark), con i colori della traccia e della manopola automaticamente scuriti in modo che un sito che già cambia tema ottenga una barra di scorrimento che cambia con esso —senza calcoli separati necessari. Ogni opzione aggiorna l'output in tempo reale mentre lo regoli, e il totale sotto il risultato riporta quanti blocchi di regole CSS sono stati generati e il numero esatto di caratteri.
Tutto viene eseguito localmente nel tuo browser: nessun selettore, colore o CSS viene mai inviato a un server. Copia il risultato direttamente nel tuo foglio di stile, scaricalo come file .txt, oppure invialo all'input di un altro strumento per continuare a perfezionarlo.