Generátor CSS posuvníku
Vygenerujte vlastní CSS pro ::-webkit-scrollbar a scrollbar-width/scrollbar-color pravidla.
Generátor CSS posuvníku
Výchozí prohlížečový posuvník se zřídka shoduje se zbytkem designu a jeho úprava znamená pamatování si dvou různých specifikací najednou: pseudo-prvky ::-webkit-scrollbar pro WebKit, které používají Chrome, Safari a Edge, a standardní vlastnosti scrollbar-width/scrollbar-color, které čte Firefox. Tento nástroj generuje obojí najednou z několika možností, takže zkopíruješ jeden blok CSS a každý velký prohlížeč zobrazí odpovídající posuvník.
Nastavíš cílový selektor – body pro celou stránku nebo třídu jako .sidebar pro jeden posuvný panel – potom si vybeřeš šířku posuvníku v pixelech, barvy dráhy a jezdce a barvu, na kterou se jezdec změní při najetí. Zaoblení jezdce upravuje border-radius chopitelného pruhu a vnitřní okraj přidává transparentní mezeru mezi jezdcem a dráhou, aby to vypadalo jako plovoucí pilulka namísto pevného bloku. Možnost Varianta přepíná mezi normálním posuvníkem prohlížeče, tenčí verzí "tenký" a "skrytý", která zcela odstraní posuvník pomocí -ms-overflow-style a scrollbar-width: none, zatímco nechá posun vlastního prvku nedotčený.
Po zapnutí varianty pro tmavý režim se druhá kopie pravidel zabalí do bloku @media (prefers-color-scheme: dark), přičemž se barvy dráhy a jezdce automaticky ztmavují, aby stránka, která už přepíná motivy, dostala posuvník, který se s ní mění – žádný samostatný výpočet není potřebný. Všechny možnosti aktualizují výstup za chodu, když je upravuješ, a počitadlo pod výsledkem hlásí, kolik CSS bloků pravidel bylo vygenerováno a přesný počet znaků.
Všechno běží lokálně ve vašem prohlížeči: žádný selektor, barva ani CSS se nikdy neposílá na server. Zkopíruj výsledek přímo do svého stylopisu, stáhni si jej jako soubor .txt nebo jej pošli na vstup jiného nástroje, abys jej mohl dále vylepšovat.