Trick # 170 | Dieser Beitrag beinhaltet 364 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Die Bildlaufleiste eines Webbrowsers – auch Scrollbar genannt – erscheint meistens in langweiligem grau-in-grau. Die Darstellung lässt sich aber mit ein wenig CSS-Code beeinflussen – so passt sie im Handumdrehen zum Design Ihrer Website.
Werfen Sie einen Blick rechts auf die Scrollbar, wenn Sie diesen Beitrag lesen: Der Schieberegler erscheint im selben grün und der Hintergrund im blau des Dr-Code-Visuals. Das haben mit einer Handvoll CSS-Code-Zeilen gelöst.
Diesen Code können Sie nach Ihren eigenen Bedürfnissen anpassen und in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätziches CSS) einfügen:
/* Breite der Bildlaufleiste */
::-webkit-scrollbar {
width: 25px;
}
/* Hintegrund der Bildlaufleiste */
::-webkit-scrollbar-track {
background: #293280;
}
/* Styling des Schiebereglers */
::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg,#59B14B 0%,#ffffff 100%)!important;
/* Sie wünschen keinen Farbverlauf?
Entfernen Sie einfach die vorige Zeile (background-image) und verwenden Sie stattdessen die folgende Zeile (background). */
background: #59B14B;
border-radius: 10px;
border: 5px solid #293280;
}
/* Schieberegler beim hovern stylen */
::-webkit-scrollbar-thumb:hover {
/* Hier können Sie eigenen CSS-Code einfügen, welcher die Darstellung des Schiebereglers beim hovern beeinflusst. */
}Das Scrollbar-Styling beeinflusst übrigens sowohl vertikale wie horizontale Bildlaufleisten.
Die verschiedenen Farb-Einstellungen sollten Sie natürlich Ihrem Design entsprechend anpassen. Die Darstellung der Bildlaufleiste lässt sich dann sehr schön in die Gestaltung einbinden.
Werbung
Werbung
