czwartek, 4 kwietnia 2013

Jak zmienić wygląd Scrollbaru?

Element: Scrollbar
Stopień trudności: xxxx
Czas wykonywania: 5 minut
     Męczyło mnie to niemiłosiernie od kiedy wrzuciłam "tagboard". Scrollbar - Niby taki mały, nie przyciągający wielkiej uwagi paseczek, a psuł cały wygląd, może nie tyle bloga, co jego lewej kolumny. Wówczas zaczęłam ambitne przeszukiwane wszystkich stron jakie tylko kojarzyłam. Nie, nie przyszło mi do głowy, aby zwyczajnie wpisać w google "scrollbar css", ...aż do pewnego momentu. 
Pewnie wiele z Was skojarzyło już problem i go rozwiązało lata świetlne temu, ale mimo to dla tych początkujących to wrzucę.

UWAGA! Działa tylko w przeglądarce Google Chrome!

Mamy siedem selektorów, z czego cztery przytoczę niżej jako te najważniejsze i tych, których użyłam ja.
: :-webkit-scrollbar /1/
: :-webkit-scrollbar-track-piece /4/
: :-webkit-scrollbar-track /3/
: :-webkit-scrollbar-thumb /5/
: :-webkit-scrollbar-button /2/
: :-webkit-scrollbar-corner /6/
: :-webkit-resizer /7/
patrz tutaj ( obrazek pokazujący jakim elementom odpowiadają powyższe selektory )
Klikamy szablon > dostosuj > zaawansowane > Dodaj arkusz CSS

Trudne? Myślę, że nie. I jeszcze parę przykładów z życia wziętych.

Kod użyty przeze mnie w jednym z szablonów:
::-webkit-scrollbar { width: 10px; height: 10px; background: #eaf2f2;}
::-webkit-scrollbar-thumb:vertical {background: #D3BCD4; border-bottom:2px #666666;} 
vertical ( z ang. pionowy ) oznacza, że chodzi nam o nic innego, jak o pasek w pionie. Gdy chcemy kombinować z paskiem w poziomie mamy horizontal.

Możecie dodawać wszystkie poznane komendy ( jak to zwał tak to zwał ) - background, height, width, border, border-radius - to są jednak te według mnie najbardziej pomocne i przydatne.
Taki najprostszy:
::-webkit-scrollbar {width:15px;} ::-webkit-scrollbar-thumb{background:#F5F8F7; border-radius:5px;}
Myślę, że te najprostsze są jednocześnie tymi najlepiej wyglądającymi, ale może to tylko moje zdanie. Sami oceńcie :)

15 komentarzy:

  1. Taak, to bardzo nie fair. Chciałabym już porzucić te wszystkie kurtki i inne szaliki. :<
    Współpraca to może za dużo powiedziane, bo sama jestem w tym wszystkim jeszcze kompletnie zielona, ale chętnie będę odwiedzać Cię częściej i dodam do linków, jak już się tutaj ogarnę. :) Dla mnie te wszystkie kody to czarna magia, także podejrzewam, że jeszcze niejednego się od Ciebie nauczę. :D

    OdpowiedzUsuń
  2. Na tajemniczym ogrodzie jest też dużo przydatnych kodów, więc możesz sobie z tej strony skorzystać. Ja ten sposób właśnie stamtąd wzięłam. ; )
    Nie ważne jakim programem się bawisz. Ważne, że t co robisz i pokazujesz ludziom jest przydatne i się podoba.

    OdpowiedzUsuń
  3. Chciałabym zobaczyć Twoją grafikę. Nie będzie zła, nie martw się. ; ) Ja niekiedy patrząc na swoje stare szablony/nagłówki to była istna masakra. Prace były tak złe, że szkoda gadać. Trening czyni mistrza. Może uda mi się to zrobić z nauką chodzenia na obcasie, ale wątpię. ; )

    OdpowiedzUsuń
  4. Z chęcią nawiążę współpracę ^^ Oczywiście dodaję do linków.
    Pozdrawiam,
    S.

    OdpowiedzUsuń
  5. Zapoczątkuję całą falę, zobaczysz. :D O, mi by było bardzo miło, nie mam nic przeciwko. :)

    OdpowiedzUsuń
  6. Twój szabln wygląda bardzo dobrze ! Tak świerzo, wiosennie i baaardzo schludnie, chociaż wolałabym zobaczyć jakieś graficzne kombinacje, aniżeli zwykły obrazek i dopracowany CSS. Niemniej jednak całość prezentuje się dobrze, instrukcja również bardzo przydatna i być może sama z niej skorzystam.
    Oczywiście dodaję Twojego bloga do linków :D

    OdpowiedzUsuń
  7. Mi też nieśpieszno z nowym postem, póki co nie mam nic przygotowanego, a prawdopodobnie przez weekend nie będę miała czasu, bo mam dzisiaj urodziny. :) Trzymam kciuki żeby tak było. :D

    OdpowiedzUsuń
  8. Dziękuję. :) A, no to czekam w takim razie z niecierpliwością. :D

    OdpowiedzUsuń
  9. Masz śliczny wygląd bloga. Instrukcja na suwak naprawdę fajna, szkoda tylko, że działa wyłącznie w Chromie i w IE. Inne przeglądarki 'nie ogarniają' jeszcze tego kodu (;

    OdpowiedzUsuń
  10. To myślę, że może być kwestia zapisu. Webkit odnosi się m.in do Chroma, do mozilli z tego co mi się wydaje jest -moz, a opery -o :) Szczerze, nie przyszło mi do głowy wcześniej, aby to wypróbować w innych przeglądarkach. :(

    OdpowiedzUsuń
  11. Yay, ale tu u ciebie wiosennie... Układ przypomina jak z tumblra, albo tych zagranicznych blogów i uważam, że takie odświeżenie jest o wiele lepsze. c: Sama robiłaś bloga od podstaw? Mam przynajmniej takie wrażenie.
    Hm, wypróbowałam ten sposób z suwakiem i nie mogę wyjść z podziwu. O wiele lepiej to wygląda.
    Pewnie jeszcze wpadnę na oględziny. c;

    Ej, ej, mi się wydaję, że kiedyś już tu byłam... z dA?

    OdpowiedzUsuń
  12. Możesz pokazać swoje prace. Możesz nawet na GG mi je przesłać. ; )

    OdpowiedzUsuń
  13. Ale ładnie tutaj masz! Tak przyjemnie i wiosennie! Trochę wyglądem jak na LJ, bardzo ciekawie. :)

    OdpowiedzUsuń
  14. Powiem szczerze, że szablon jest genialny! Taki bardzo w stylu tumblra, co uwielbiam :) Będę tu często wpadać! Powodzenia w prowadzeniu bloga <3

    OdpowiedzUsuń
  15. No proszę i już nie musi być tak nudnie :D Dzięki za info

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler