Hotová řešení > Barevný přechod na pozadí stránky

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.

CSS

body {background: #007FD8 url("prechod.gif") repeat-x 0 0;}
h1 {color: white;}


HTML

<body>
  <h1>Vertikální barevný přechod na pozadí</h1>
</body>

Výsledek v prohlížeči

Stáhnout uvedené řešení ↓ (ZIP, staženo 3088×)

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Více…
 

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

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)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 
 TOPlist