Im Wandel der Zeit
CSS3, HTML 5, Webkit, das Internet steckt voller Möglichkeiten, denn noch nie war im Web Design so viel denkbar wie heute. Aktuell betrifft dies die Scrollbars, die damals schon im Internet Explorer 5.5 verändert werden konnten. Doch seitdem hat sich eigentlich nichts mehr getan, denn obwohl sich viele Dinge weiterentwickeln, die Möglichkeiten beim Design blieben lange Zeit begrenzt. Bis jetzt.
CSS 3 Scrollbar
Eine der schönsten Neuerungen, zumindest meiner Meinung nach, ist die Anpassung der Scrollbars. Endlich darf ich selbige mit CSS3 komplett frei designen, endlich versauen die Scrollbars nicht mehr ein perfektes Theme. Auch hier auf der Website sind die benutzerdefinierten Scrollbars aktiviert, schön minimalistisch designt, so wie es zum aktuellen Theme des Blogs passt. Firefox Nutzer bleiben dabei außen vor, denn Sie bekommen nur die Standard Scrollbars angezeigt.
Eigene Scrollsbars lohnen sich
Doch auch wenn die Scrollbars im Firefox nicht funktionieren, der Aufwand sie zu ändern ist gering, die optische Brillianz allerdings groß. Ich persönlich bin großer Fan solcher detaillierter Anpassungen, denn mit ziemlich wenig CSS, lässt sich eine solche Scrollbar relativ einfach realisieren. Das Ergebnis zeigt den Nutzern dann, dass sich der Betreiber Mühe gibt, sich mit den aktuellen Standards und Möglichkeiten bestens auskennt.
Die Elemente einer Scrollbar
Die Möglichkeiten mit Webkit sind vielfältig, doch es müssen auch nicht alle genutzt werden. Ich bin ein Anhänger vom Minimalismus, denn ganz ehrlich, einfach und schnell funktioniert immer noch am besten. Wer will darf dennoch auf einige Elemente zurückgreifen und diese, je nach Wunsch, frei anpassen. Folgende sind dabei verfügbar.
- ::-webkit-resizer
- ::-webkit-scrollbar
- ::-webkit-scrollbar-button
- ::-webkit-scrollbar-corner
- ::-webkit-scrollbar-thumb
- ::-webkit-scrollbar-track
- ::-webkit-scrollbar-track-piece
Der Status
Jede Scrollbar und jedes Element selbiger, kann selbstverständlich auch verschiedene Phasen durchlaufen. Jeder Status ist demnach noch anpassbar, auch wenn die Mühe für eine Scrollbar dann doch etwas übertrieben scheint. Trotzdem, wer möchte darf folgende Ereignisse der Scrollbars noch genauer individualisieren.
- :corner-present
- :decrement
- :double-button
- :end
- :horizontal
- :increment
- :no-button
- :single-button
- :start
- :vertical
- :window-inactive
Eine Überlegung wert
Mit Hilfe der Bezeichnungen oben, einem Staus, sowie ein wenig CSS3, lassen sich nun komplexe, aber auch ganz einfache, Scrollbars erstellen. Das schöne dabei ist immer, dass die Website mit einer eigenen Scrollbar noch hübscher wirkt, der Browser sich selbst anzupassen scheint. Aktuell gefällt es auch den Nutzern noch, denn so viele eigene Scrollbars gibt es im Web derzeit nicht, weshalb das Feature aktuell sogar ein wenig Eindruck schinden kann. Ich selbst finde es einfach hübsch und durch den minimalen Aufwand auch lohnenswert. Wer von euch nun ein konkretes Beispiel oder eine Vorlage sucht, der findet unter Snippets den Code, den ich selbst für die Scrollbar hier im Blog verwendet habe.
