Pokud si některé české a zahraniční WWW stránky prohlížíte pomocí Internet Exploreru 5.5, určitě vám neuniklo, že některé české weby mají velmi zajímavým způsobem obarveny rolovací lišty prohlížeče. Jak je tohoto efektu docíleno?
Barvení rolovacích lišt v Internet Exploreru 5.5
Hned na začátek článku bych chtěl všem čtenářům, kteří budou tento článek číst, předeslat, že změna barvy rolovacích prvků prohlížeče, ale také změna barvy posuvníku u <textarea> bude fungovat pouze v Internet Exploreru 5.5, protože se jedná o vlastní vylepšení tohoto prohlížeče. Pokud máte výše zmiňovaný internetový prohlížeč, podívejte se na rolovací lištu této stránky, jak je zbarvena.
Říká se, že jeden obrázek vydá za tisíc slov. Pokud se vám obarvené lišty zamlouvají, dejte si práci s tím, aby rolovací lišta vypadala opravdu dobře a uživatel nebyl zmaten třeba tím, že dostatečně nerozezná posuvník od prostoru pod ním. Posuvník doporučuji mít výrazně tmavší než barvu pod ním.
Zkuste se třeba inspirovat na úvodní stránce serveru iDnes, Mobil.cz či Slunečnice.cz. Nezapomínejte ale, že výše uvedený příklad obarví nejenom rolovací lištu v prohlížeči, ale také barvu rolovátka u <textarea>, což obvykle vypadá nevkusně a velmi rušivě.
A taková perlička na závěr, na MSDN si můžete interaktivně vytvořit vlastní barevné kombinace rolovací lišty prohlížeče.
Čtěte také: Aplikace epoxidové barvy na beton
Klíčové slovo currentColor
Klíčové slovo currentColor obsahuje aktuální barvu elementu. Element bude mít rámeček v aktuální barvě. Použitím currentColor si můžeme usnadnit práci při kopírování barev.
Hodnota currentColor bývá u řady vlastností výchozí, takže je možné její uvedení vypustit. Klíčové slovo currentColor je u řady vlastností zbytečné uvádět. Klíčové slovo currentColor funguje od IE 9. Zabránit nutnosti duplikovat barvy mohou CSS proměnné nebo proměnné v preprocesorech.
Příklady použití currentColor
Následující tabulka ilustruje významy vlastností a použití currentColor:
| Vlastnost | Popis | Příklad |
|---|---|---|
| border-color | Barva rámečku. | border: 1px solid currentColor; |
| color | Barva textu. | body {color: red;} |
| background-color | Barva pozadí. | background-color: currentColor; |
Změna barvy pozadí stránek
Přinášíme vám jednoduchý návod, jak si můžete pozadí stránek změnit s pomocí kaskádových CSS stylů.
1. Jednoduchá změna barvy pozadí
Chcete-li jednoduše změnit barvu pozadí vašich stránek např. na zelenou, vložte níže uvedený zápis do vlastního CSS stylu. Atribut "background-color" v tomto případě umožňuje zapsat jen barvu.
Čtěte také: Jak vybrat vodou ředitelnou barvu na beton
body { background-color: green;}2. Barevný přechod (gradient)
Barevným přechodem (tzv. gradientem) nazýváme pozadí stránek přecházející plynule z jedné barvy do druhé. Představte si např. tmavě šedé pozadí přecházející postupně do světle šedé.
Nastavení pozadí tzv. gradientu se tvoří kombinací obrázku s vytvořeným gradientem a barvy pozadí, která by měla navazovat na spodní barvu obrázku. V programu na tvorbu a úpravu obrázků (doporučujeme např. Gimp) vytvořte obrázek o velikosti např. 1px na šířku a cca 1000px na výšku.
Vytvořený obrázek následně nahrajte do inPage do sekce OBRÁZKY, obrázek pojmenujte např. jako "pozadí".
body { background: url("/obrazek/3/adresa-obrazku-jpg") repeat-x #barva_pozadi;}Zápis "url" je povinný, pokud pracujete s obrázkem -> vyznačuje cestu k originálu obrázku. Zápis repeat-x způsobuje opakování obrázku na pozadí v horizontální poloze.
3. Obrázek na pozadí
Vhodné obrázky pro pozadí vašich webových stránek můžete najít třeba na internetu. Následně obrázek s pozadím nahrajte do administrace vašeho inPage do sekce OBRÁZKY. Obrázek na pozadí definujeme pomocí atributu background: url(). Opakování obrázku způsobí zápis repeat - tímto vyskládá prohlížeč celé pozadí opakujícím se obrázkem.
Čtěte také: Použití dvousložkové epoxidové barvy
V první řadě záleží na tom, jaký používáte jazyk aplikace inPage. Přednastavený jazyk je český, lze jej však přepnout do slovenštiny, němčiny, angličtiny atd.
- Používáte inPage v češtině? Pak URL cesta k obrázku bude: url("/obrazek/3/adresa-obrazku-jpg")
- Používáte inPage ve slovenštině? Pak URL cesta k obrázku bude: url("/obrazok/3/adresa-obrazku-jpg")
- Používáte inPage v angličtině? Pak URL cesta k obrázku bude: url("/image/3/address-of-image-jpg")
- Používáte inPage v němčině? Pak URL cesta k obrázku bude: url("/bild/3/bild-adresse-jpg")
V druhé řadě potřebujete zjistit samotnou adresu vašeho obrázku: /adresa-obrazku-jpg/.
tags: #css #barva #lišty #prohlížeče