Autor: Paweł Rajewski
Możliwość kolorowania pasków przewijania to ciekawa i często wykorzystywana cecha Internet Explorera. Kolorowe suwaki powoli stają się modne. Uatrakcyjniają jedne i… są zmorą innych serwisów. Czasami ładne, czasem niewygodne, ale wszechobecne. Pora, by zagościły i na naszej stronie.
Kolory pasków przewijania określa osiem właściwości:
1. scrollbar-base-color
2. scrollbar-face-color
3. scrollbar-highlight-color
4. scrollbar-3dlight-color
5. scrollbar-shadow-color
6. scrollbar-darkshadow-color
7. scrollbar-arrow-color
8. scrollbar-track-color
Do żadnej z tych właściwości nie ma dostępu z poziomu „czystego” HTML-a, i aby z nich skorzystać należy sięgnąć po style (CSS). Chcąc pokolorować suwaki przewijające całą stronę, definiujemy wybrane właściwości w ramach znacznika BODY (patrz: uwaga1 na końcu artykułu).
1. scrollbar-base-color
Określa podstawowy kolor paska – wystarczy określić tę jedną właściwość, by uzyskać pasek w dowolnym kolorze. Np.:
<BODY STYLE="scrollbar-base-color:#00ff00">
…spowoduje pojawienie się paska w kolorze jadowitej zieleni.
Pozostałe właściwości (nr 2- pozwalają ustawiać kolory poszczególnych części paska.
2. scrollbar-face-color
To kolor podstawowej powierzchni paska i ciemnej części „kratki” wypełniającej ścieżkę, po której przesuwa się suwak.
<BODY STYLE="scrollbar-face-color:#00ff00">
…spowoduje pojawienie się podobnego do poprzedniego, zielonego paska. Warto zauważyć, że niektóre części pozostały w oryginalnym kolorze typowym dla Windows (cienie, strzałki…).
3. scrollbar-highlight-color
To kolor oświetlenia krawędzi, na które pada światło dając efekt trójwymiarowości; a także jasnej części „kratki” wypełniającej ścieżkę, po której przesuwa się suwak.
<BODY STYLE="scrollbar-highlight-color:#ffff00">
…suwak i „kratka” mają teraz żółte podświetlenie.
4. scrollbar-3dlight-color
To kolor cienkiej obwódki wokół trójwymiarowych, podświetlonych elementów paska.
<BODY STYLE="scrollbar-3dlight-color:#00ffff">
…pasek ma delikatną obwódkę w kolorze cyan.
5. scrollbar-shadow-color
To kolor zacienionych części trójwymiarowych elementów paska.
<BODY STYLE="scrollbar-shadow-color:#ff00ff">
…pasek ma buraczkowy cień!
6. scrollbar-darkshadow-color
To kolor ciemnego cienia rzucanego przez „wypukłe” części paska.
<BODY STYLE="scrollbar-darkshadow-color:#0000ff">
…ciemny cień zrobił się niebieski.
7. scrollbar-arrow-color
To kolor strzałek na przyciskach.
<BODY STYLE="scrollbar-arrow-color:#ff0000">
…strzałki są teraz czerwone.
8. scrollbar-track-color
To kolor ścieżki, po której przesuwa się suwak.
<BODY STYLE="scrollbar-track-color:#000000">
…ścieżka jest czarna.
Wszystkie właściwości można stosować jednocześnie rozdzielając je średnikami:
<BODY STYLE="scrollbar-face-color:#00ff00; scrollbar-highlight-color:#ffff00; scrollbar-3dlight-color:#00ffff; scrollbar-shadow-color:#ff00ff; scrollbar-darkshadow-color:#0000ff; scrollbar-arrow-color:#ff0000; scrollbar-track-color:#000000">
…to w efekcie zielony suwak z czerwonymi strzałkami, żółtym podświetleniem, jasnoniebieską obwódką, buraczkowym cieniem, niebieskim głębokim cieniem, poruszający się po czarnej ścieżce.
Dobierając odpowiednie kolory można uzyskać ciekawe efekty. „Oświetlenie” wcale nie musi być jasne, a „cień” ciemny. Dobierając taki zestaw:
<BODY STYLE="scrollbar-face-color:#c0c0c0; scrollbar-highlight-color:#808080; scrollbar-3dlight-color:#000000; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#c0c0c0; scrollbar-arrow-color:#000000; scrollbar-track-color:#b0b0b0">
…uzyskamy suwak „wklęsły” zamiast „wypukłego”.
Dobierając taki sam kolor dla par: scrollbar-highlight-color – scrollbar-shadow-color i scrollbar-3dlight-color – scrollbar-darkshadow-color, uzyskamy pasek zupełnie „płaski”:
<BODY STYLE="scrollbar-face-color:#c0c0c0; scrollbar-highlight-color:#c0c0c0; scrollbar-3dlight-color:#808080; scrollbar-shadow-color:#c0c0c0; scrollbar-darkshadow-color:#808080; scrollbar-arrow-color:#000000; scrollbar-track-color:#808080">
Warto zauważyć, że właściwości szczegółowe (nr 2 do są „silniejsze” od bardziej ogólnej właściwości scrollbar-base-color. Jeśli więc definiujemy wszystkie szczegółowe właściwości, nie ma sensu jednoczesne stosowanie scrollbar-base-color – każdy kolor ustalony przez przeglądarkę i tak zostanie nadpisany. Natomiast stosowanie scrollbar-base-color ma sens wówczas, gdy chcemy określić tylko ogólny kolor paska i ewentualnie zmodyfikować kolory pojedynczych, lecz nie wszystkich, elementów.
Ponieważ kolory pasków ustawia się w znaczniku BODY, nic nie stoi na przeszkodzie, by każda z ramek FRAME miała pasek w innym kolorze – wystarczy, że ustawimy odpowiednie wartości BODY STYLE=”…” dla każdej z otwieranych w ramkach stron.
Można zrobić kolejny krok i ustawiać kolory pasków przewijania dla paragrafów czy podobnych elementów zawierających teksty bądź inną treść (osoby początkujące często nie wiedzą, że taka możliwość w ogóle istnieje!). To już troszkę wyższa „szkoła jazdy” – dla zachęty mały przykład:
<P STYLE="height:100px; width:200px; overflow:auto; color:#ff0000; scrollbar-base-color:#FF0000; scrollbar-track-color:#000000;">czerwony tekst</P> <P STYLE="height:100px; width:200px; overflow:auto; color:#00ff00; scrollbar-base-color:#00FF00; scrollbar-track-color:#000000;">zielony tekst</P> <P STYLE="height:100px; width:200px; overflow:auto; color:#0000ff; scrollbar-base-color:#0000FF; scrollbar-track-color:#000000;">niebieski tekst</P>
Początkowo pojawią się tylko trzy kolorowe napisy. Wpiszmy jednak do paragrafów więcej tekstu dodając kolejne linie. W pewnym momencie pojawią się… suwaki – czerwony, zielony i niebieski. Będzie można przewijać teksty w ramach paragrafów niemal jak w osobnych ramkach! Podobnie można postąpić z innymi znacznikami takimi jak B, I, H czy DIV.
Kolory suwaków są „dziedziczone”, co znaczy, że parametry ustawione dla całej strony (w BODY) są przejmowane przez elementy znajdujące się na tej stronie. Jeśli suwaki całej strony będą czerwone, to „wyjściowo” czerwone będą również suwaki poszczególnych „niby-ramek” (ale nie prawdziwych ramek FRAME!). Dodając odpowiednie właściwości nr 2-8 można modyfikować te kolory dowolnie, osobno dla każdej „niby-ramki”. Należy przy tym pamiętać, że właściwość scrollbar-base-color jest najsłabsza i przy jej pomocy nie można zmienić właściwości bardziej szczegółowych „odziedziczonych” z elementu BODY. Przykładowo, jeśli uruchomimy dwa ostatnie przykłady równocześnie, suwaki paragrafów P nie będą kolorowe, a zmianie ulegnie tylko kolor ścieżki. W takiej sytuacji należy zdefiniować dla paragrafów osobno szczegółowe właściwości nr 2-8.
Do wszystkich przedstawionych właściwości istnieje dostęp przy pomocy skryptów, co otwiera drogę do suwaków migających, zmieniających kolory, czy skrzących się barwami tęczy. To temat dla bardziej zaawansowanych twórców stron www. Dla prezentacji możliwości przedstawię tylko jeden przykład – prosty skrypt zmieniający kolor suwaków w miarę przewijania strony – od żółtego (suwak na górze strony) do czerwonego (na dole). Ponieważ skrypt wykorzystuje „słabą” właściwość scrollbarBaseColor, nie należy jednocześnie definiować kolorów w tagu BODY.
<SCRIPT TYPE="text/Jscript" LANGUAGE="JScript" DEFER>
function fScroll(){
var iBST=oBody.scrollTop;
var iBSTMax=oBody.scrollHeight-oBody.clientHeight;
var iColor=255-(Math.round(iBST/iBSTMax*255));
oBody.style.scrollbarBaseColor='rgb(255,'+iColor+',0)';
};
var oBody=window.document.body;
oBody.style.scrollbarTrackColor='#000000';
oBody.onscroll=fScroll;
fScroll();
</SCRIPT>
Udanej zabawy kolorami.
Paweł Rajewski
Uwaga1: Wszystkie przykłady zamieszczone w artykule dotyczą „starego” trybu pracy Internet Explorera. Przy pracy w „nowym” trybie, kolory pasków przewijania definiujemy w tagu HTML, a nie w tagu BODY. Więcej informacji o trybach pracy w artykule „Internet Explorer a CSS”.
Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.