: Home / HTML / CSS / kurs CSS / Kolor paska przewijania

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/48-kolor-paska-przewijania.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Kolor paska przewijania
Ocena użytkowników: / 1
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 03:02

Pamiętam, że kiedy po raz pierwszy ujżałem kolorowy pasek przewijania byłem w szoku, myślałem - "jak on to zrobił?" Dzisiaj dziwię się jeśli na stronie pasek ma standardowe kolory... Dlatego właśnie umieściłem całą jedną lekcję o zmianie koloru paska przewijania - choć nie jest to nic trudnego.

Wszelkie zmiany w zabarwieniu scrollbara umieszczamy w opisie sekcji body. Czyli może to być definicja body [<body style="i określamy;">] lub też w osobnym pliku, co ja właśnie tu zastosuję.

Zmiany w pliku 'style.css':

/* otwórz plik 'style.css' który utworzyłeś na poprzedniej lekcji */
BODY {
background-color: #CBD1D3;
text-align: center;
/* to wszystko powinno już tam być */

/* a teraz opis scrollbara */
scrollbar-3dlight-color:silver; // 1
scrollbar-arrow-color:black; // 2
scrollbar-base-color:white; // 3
scrollbar-dark-shadow-color:black; // 4
scrollbar-face-color:white; // 5
scrollbar-highlight-color:silver; // 6
scrollbar-shadow-color:silver // 7
}


TABLE {
 margin-left: auto;
 margin-right: auto; }

Opis:
* - jeśli nie za bardzo zrozumiesz opisu, to sprobuj na osobnej stronie pozmieniać kolory, wtedy sam zobaczysz co konkretny fragment zmienia. Pamiętaj o usunięciu komentarzy [napisów za '//' i między '/* ...*/'].
1 - Kolor efektu 3d.
2 - Kolor strzałki.
3 - Kolor toru przesuwaka.
4 - Kolor prawego i dolnego skraju.
5 - Kolor całego scrolla.
6 - Kolor lewego i górnego skraju.
7 - Kolor cienia.

Schemat:

scrollbar-właściwość-color: kolor;

Podobnie jak w poprzednim przypadku na stronie nie zmieniło się zbyt wiele - jedynie kolor paska przesuwania, który w tej chwili i tak jest raczej mało widoczny. A w treści strony nie było żadnej zmiany. Ale spokojnie za parę lekcji zobaczysz już pierwsze rezultaty swojej pracy. Jeśli pracujesz na Operze lub FF to nie zobaczysz, gdyż te przeglądarki nie kolorują suwaka.

Prawdopodobnie jak zaczniesz szukać to znajdziesz jeszcze inne właściwości suwaków, ale to są podstawowe, które w zupełności starczają na pełne określenie scrollbara.

Nanastępnej lekcji nauczysz się zmieniać wygląd kursora, więc także niewiele się zmieni w wyglądzie strony. Za to już w kolejnych lekcjach twoja strona będzie, wręcz rewolucyjnie, ulegac zmianom.

Uwaga!!! Niektóre przeglądarki [np. Firefox, Opera] nie pozwalają na zmianę koloru paska przewijania. Jest to niezgodne ze standardami W3C. Choć np. najnowsze Safari pozwala na jeszcze większą ingerencję w wygląd tego elementu przeglądarki.

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież