Barevná rolovací lista pro Internet Explorer 5.5

Barevná rolovací lista pro Internet Explorer 5.5

Pokud si některé české a zahraniční WWW stránky prohlízíte pomocí Internet Exploreru 5.5, určitě vám neuniklo, ze některé české weby mají velmi zajímavým způ 24524x2312y ;sobem obarveny rolovací listy prohlízeče. Jak je tohoto efektu docíleno? Velmi jednoduse - pomocí kaskádových stylů.

Hned na začátek článku bych chtěl vsem čtenářům, kteří budou tento článek číst, předeslat, ze změna barvy rolovacích prvků prohlízeče, ale také změna barvy posuvníku u <textarea> bude fungovat pouze v Internet Exploreru 5.5, protoze se jedná vlastní vylepsení tohoto prohlízeče. U ostatních internetových prohlízečů - například Mozilla či Opera - budou listy obarveny standardní barvou operačního systému.

Nebudeme se zbytečně zdrzovat a podívejte se na tento kousek kódu:

Pokud máte výse zmiňovaný internetový prohlízeč, podívejte se na rolovací listu této stránky, jak je zbarvena. Zbarvení listy je pochopitelně vyvedeno v křiklavých barvách, aby jednotlivé prvky listy byly lépe viditelné:

• scrollbar-face-color: barva posuvníku a prostoru kolem horní a spodní sipky
• scrollbar-shadow-color: barva druhého stínu u pravých a spodních prvků listy
• scrollbar-highlight-color: barva druhého stínu u levých a horních okrajů jednotlivých prvků listy
• scrollbar-3dlight-color: barva prvního stínu u levých a horních okrajů jednotlivých prvků listy
• scrollbar-darkshadow-color: barva prvního stínu u pravých a spodních prvků listy
• scrollbar-track-color: barva pod posuvníkem
• scrollbar-arrow-color : barva horní a spodní sipky

Říká se, ze jeden obrázek vydá za tisíc slov. Tolik sice předchozí odstavec nemá, ale grafické zvětsení jednotlivých prvků rolovací listy prohlízeče vám přijde určitě vhod:

Pokud se vám obarvené listy zamlouvají, dejte si práci s tím, aby rolovací lista vypadala opravdu dobře a uzivatel nebyl zmaten třeba tím, ze dostatečně nerozezná posuvník od prostoru pod ním. Posuvník doporučuji mít výrazně tmavsí nez barvu pod ním. Zkuste se třeba inpirovat třeba na úvodní stránce serveru iDnes, Mobil.cz či Slunečnice.cz. Nezapomínejte ale, ze výse uvedený příklad obarví nejenom rolovací listu v prohlízeči, ale také barvu rolovátka u <textarea>, coz obvykle vypadá nevkusně a velmi rusivě.

A taková perlička na závěr, na MSDN si můzete interaktivně vytvořit vlastní barevné kombinace rolovací listy prohlízeče. A to je pro dnesek opravdu vse, přeji vám hezký den.