Pasek przewijania w CSS

Pasek przewijania w CSS

Scrolling czyli pasek przewijania jest z całą pewnością nieodłącznym elementem na stronach www. Jest tak powszechny, że większość osób nawet nie zwraca na niego uwagi - jest bo musi być, i tyle :) Ja jednak pokażę Ci jak dzięki stylom wpłynąć na jego wygląd.

Najlepiej pasek dopasować do kolorystyki strony. My stworzymy go w kolorystyce niebieskiej.

Zaczynamy

Elementy odpowiadające za wygląd paska są bardziej złożone niż te które poznałeś do tej pory. Ich nazwa składa się z trzech części:

 scrolling-rodzaj-color

Wszystkie elementy umieszczamy w obszarze BODY np.

 body { element: właściwość; ...} 

To właśnie w body określamy cały wygląd paska przewijania. Poniżej przedstawiam elementy które można do tego wykorzystać. Dla ułatwienia podzieliłem pasek na dwie części:

• pierwsza część to przycisk który umożliwia nam przesuwanie strony w oknie przeglądarki. Jego kolor określamy przy użyciu:

   

  
   scrollbar-face-color
  
   scrollbar-highlight-color
  
   scrollbar-shadow-color
  
   scrollbar-3dlight-color
  
   scrollbar-darkshadow-color 
  
  

  Teraz wystarczy, że wybierzemy sobie dowolne kolory. Jak już wspomniałem najlepiej dobrać je według wyglądu strony. Tak jak w htmlu możemy napisać pełną nazwę koloru np. blue lub w RGB: #115E8D. Jako kolor można wykorzystać także plik graficzny - url("obrazek.gif") .Następnie wszystko to zapisujemy w stylach. Całość może wyglądać następująco:

   

  
  body {
  
   scrollbar-face-color:#115E8D; 
  
   scrollbar-highlight-color:#ffffff; 
  
   scrollbar-shadow-color:#ffffff; 
  
   scrollbar-3dlight-color:#115E8D;
  
   scrollbar-darkshadow-color:navy;
  
  } 
  
  

  Zobacz przykład: http://www.webinside.pl/materialy/rozne/p9.htm

  Zatrzymaj się na chwilę. Zacznij zamieniać nazwy kolorów a dokładnie poznasz, który element odpowiada której części przycisku.

   

• druga część paska przewijania to "tor" po którym porusza się przycisk. Zasada używania jest taka sama jak wyżej:

   

  
   scrollbar-arrow-color 
   scrollbar-track-color  
   
  Teraz wszystko możemy połączyć w jedną całość:
  
   body {
  
   scrollbar-face-color:#115E8D; 
  
   scrollbar-highlight-color:#ffffff; 
  
   scrollbar-shadow-color:#ffffff; 
  
   scrollbar-3dlight-color:#115E8D;
  
   scrollbar-arrow-color:white;
  
   scrollbar-track-color:url("tlo.gif")
  
   } 
  
  
      
  
  
  
  Zobacz przykład: http://www.webinside.pl/materialy/rozne/p9_b.htm
  
  To już wszystko. Mam nadzieję, że nauczyłeś się kolejnej sztuczki w css :) i potrafisz to wykorzystać na swojej stronie.