Hallo, Besucher der Thread wurde 413 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[CSS] Scrollbar

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,

    der ein oder andere kennt sie bereits von diversen anderen Webseiten - die Scrollbars. Einige Styleanbieter nutzen bereits die Technik um die Scrollbars an Ihren Style anzupassen. Andere wiederum haben die Farbliche Gestaltung der Scrollbar selbst vorgenommen. Hier möchte ich euch zeigen, wie Ihr mit wenig Quellcode und Aufwand eure Scrollbar grafisch an eurem Style oder eurer Seite anpassen könnt.

    Features

    • Pures CSS
    • Leichte Integration
    • Einfaches anpassen an Deinen Style






    Demo


    Eine Live Demo kann auf Belarusinfo.de betrachtet werden.

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    ::-webkit-scrollbar ist nur für Blink- und Webkit basierte Browser wie Chrome, Edge, Oper, Safari, allen iOS Browsern und anderen verfügbar!


    Benutzung

    1. Gehe zu Anpassung Stile DEIN_STYLE
    2. Klicke auf das um den Style zu bearbeiten
    3. Wähle dort "Erweiterte Einstellungen" und füge den Quellcode (s.o.) unter "Individuelles CSS und SCSS" ein.
      Alternativ, insofern nicht mehrere verschiedene Stile installiert sind, kann der Quellcode auch unter Anpassung Stilunabhängiges CSS und SCSS eingefügt werden.
    4. Anpassen der CSS-Deklarationen
    5. Fertig!

    Beispiele zur Gestaltung der Scrollbar kann u.a. hier gefunden werden: Codepen.io: Webkit Scrollbars oder Codepen.io: Custom Scrollbar Styling.


    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots



    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!