Designa din scrollbar med CSS

Vi skall nu lära oss att ändra designen på våra scrollbars för att de skall passa bättre in i vår webbdesign.

Här följer ett exempel:

CSS attributer som använts

• scrollbar-3dlight-color: blue;
  Denna färg highlightar övre och vänstra delen av elementen i scrollbaren för att ge en 3d effekt.

• scrollbar-highlight-color: white;
  Denna färg highlightar övre och vänstra delen av elementen i scrollbaren, innanför 3dlight.

• scrollbar-arrow-color: yellow;
  Detta är färgen på pilarna i scrollbaren, alltså i de två övre och nedre blocken.

• scrollbar-base-color: yellow;
  Detta är basfärgen i scrollbaren, i vårt exempel är denna färg övertäck av de andra färgerna. Den syns alltså inte i scrollbaren.

• scrollbar-shadow-color: orange;
  Färgen hamnar som första skugga på scrollbaren, d.v.s som första färg till höger och nedåt om elementen.

• scrollbar-darkshadow-color: black;
  Denna skuggning hamnar ett snepp längre ut än shadow-color, annars fungerar den på samma sätt.

• scrollbar-face-color: gray;
  Denna färg blir scrollbarens "body"-färg. Den läggs på allt utrymme innanför skuggningar och highlights.

• scrollbar-track-color: red;
  Detta blir färgen för scrollbarens "bana", alltså utrymmet från övre och nedre elementen till scroll-elementet.

Bild-schema över CSS attributerna:

Summering och kommentarer angående custom scrollbars med CSS

Det finns ett antal viktiga regler när man ändrar scrollbars.
Den viktigaste är att alltid testa sina scrollbars för att veta i vilka browsers dessa fungerar.
Firefox visar inte ovan exempel, medans både explorer och opera gör det.
För att försäkra dig om att standardfärgerna visas i browsers som ej stödjer CSS attributerna för scrollbars lägger du in "!important" efter färgvärdet.

Ex: scrollbar-arrow-color: yellow !important;

Om din webbdesign blir för beroende av designen på dina egna scrollbars måste du ha dina firefox användare i åtanke - hur kan du ändra resten av din design för att den vanliga scrollbaren skall passa in bättre?
En vettig infallsvinkel är att kolla igenom serverloggarna för att se hur många av dina användare som använder firefox, på så vis kan du se hur mycket du borde begränsa dig för dessa.
Jag har sett en uppskog med katastrofala scrollbars, så kom också ihåg det gamla uttrycket: Less is more!

Vänligen
Anders

Fler CSS guider från webbdesign.info

Externa resurser:
w3c.org ger dig alla andra tags

---

Kommentarer    Antal 3    Medelpoäng 7/10

Bli medlem för att kunna skriva kommentarer!
Logga in om du redan är medlem.