Ako si pripraviť efektné prechody na pozadí

Tutoriál na vytvorenie jednoduchého prechodu na pozadí.

Zdravím Vás všetkých. Tento jednoduchý tip ktorý Vám v nasledujúcich riadkoch ukážem dosť často používam. Je to jednoduché a pritom efektívne riešenie problému. A samozrejme funguje to na všetkých prehliadačoch.

Takže začneme problémom. Chcem si na pozadí stránky zobrazovať farebné prechody po prípade nejaký pattern. No potrebujem to urobiť spôsobom aby som si tie farby alebo patterny mohol jednoducho obmieňať podľa potreby.

Začneme takto. V HTML kóde nám bude stačiť toto:

<p>Začiatočný obsah.</p>
<!-- začiatok -->
<div id="bg_pattern">
    <div id="bg_cover">
        <!-- -->
    </div>
</div>
<!-- koniec -->
<p>A všetko čo bude nasledovať sa zobrazí nad našim prechodom.</p>

A teraz na CSS:

#bg_pattern {
    background-image: url('pattern.png');
    margin-bottom: -300px;
}

#bg_cover {
    height: 300px;
    background-image: url('cover.png');
}

Súbor cover.png bude obrázok s prechodom z hora zo 100% priehľadnosťou na dol. Tam bude samozrejme priehľadnosť 0%. A súbor pattern.png si už domyslite.

A všetok obsah ktorí bude nasledovať sa zobrazí nad našim prechodom.

Alebo si výsledok pozrite na tejto adrese: http://michalchovanec.com/zajtra/1/