Hotová řešení > Barevný přechod na pozadí stránky
Několik lidí se mě ptalo, jak se dá udělat barevný přechod na pozadí stránky. Pojďme si tedy ukázat jak; konkrétně na příkladu vertikálního přechodu.
Jak je patrné, že definice barvy pozadí nebude stačit. Využijeme tedy obrázek s vertikálním barevným přechodem. Rozměry obrázku jsem volil 5 × 900 px. Obrázek necháme opakovat ve směru osy x. Výška záleží v podstatě na tom, kde chcete, aby se přechod lámal. Šířka může být libovolná, ale čím širší obrázek, tím má větší datovou velikost, čím užší, tím vícekrát ho musí počítač vykrelit (zopakovat na ose x). Ale dnešní stroje by neměly mít problém i s šířkou 1 px. Vyvstává pak ještě otázka, když je obrázek vysoký 900 px, co se stane, pokud má někdo vertikální rozlišení vyšší. Proto nastavíme barvu pozadí stejnou, jako má spodní okraj obrázku.
body {background: #007FD8 url("prechod.gif") repeat-x 0 0;}
h1 {color: white;}
<body>
<h1>Vertikální barevný přechod na pozadí</h1>
</body>
Stáhnout uvedené řešení ↓ (ZIP, staženo 3039×)
Chronologický přehled novinek na tomto webu
Prohlédněte si strukturu webu pro snažší orientaci.
Stáhnout celý web (V budoucnu)
Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)
Jak můžete podpořit tento web
Poslední aktualizace webu proběhla
24. 3. 2010.