Element: Scrollbar
Stopień trudności: xxxx
Czas wykonywania: 5 minut
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.
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:
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.
: :-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:
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.::-webkit-scrollbar { width: 10px; height: 10px; background: #eaf2f2;}::-webkit-scrollbar-thumb:vertical {background: #D3BCD4; border-bottom:2px #666666;}
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:Myślę, że te najprostsze są jednocześnie tymi najlepiej wyglądającymi, ale może to tylko moje zdanie. Sami oceńcie :)
::-webkit-scrollbar {width:15px;} ::-webkit-scrollbar-thumb{background:#F5F8F7; border-radius:5px;}