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;}
Taak, to bardzo nie fair. Chciałabym już porzucić te wszystkie kurtki i inne szaliki. :<
OdpowiedzUsuń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
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. ; )
OdpowiedzUsuńNie ważne jakim programem się bawisz. Ważne, że t co robisz i pokazujesz ludziom jest przydatne i się podoba.
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ńZ chęcią nawiążę współpracę ^^ Oczywiście dodaję do linków.
OdpowiedzUsuńPozdrawiam,
S.
Zapoczątkuję całą falę, zobaczysz. :D O, mi by było bardzo miło, nie mam nic przeciwko. :)
OdpowiedzUsuń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.
OdpowiedzUsuńOczywiście dodaję Twojego bloga do linków :D
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ńDziękuję. :) A, no to czekam w takim razie z niecierpliwością. :D
OdpowiedzUsuń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ń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ń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.
OdpowiedzUsuń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?
Możesz pokazać swoje prace. Możesz nawet na GG mi je przesłać. ; )
OdpowiedzUsuńAle ładnie tutaj masz! Tak przyjemnie i wiosennie! Trochę wyglądem jak na LJ, bardzo ciekawie. :)
OdpowiedzUsuń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ńNo proszę i już nie musi być tak nudnie :D Dzięki za info
OdpowiedzUsuń