spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Michal Chovanec 24.2.2012
Hodnoť článok:
1 0

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/

Hodnoť článok:
1 0

14 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Roland Dobos 27.4.2012 11:26:55
no znova som narazil na tento článok a teraz mi zas do očí udrela iná vec - rgba pozadia a border-radius -> ani jedno z nich nepodporuje IE. Pre oba je však jednoduché riešenie, ktoré nemôžeme zanedbať, keďže hoci všetci vieme, že IE nerobí to čo má, tak, ako by mal, ale ešte stále je najpoužívanejším prehliadačom... ale k veci

ak používaš rgba, stále nechaj fallback
.koniec {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.15);
border: 1px solid rgb(0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.25);
}

a pre ošetrenie priehľadnosti pomocou podmienených HTML poznámok nalinkuješ stylesheet pre IE, kde za pozadie dáš 1x1px priehľadný obrázok a povolíš repeat

čo sa týka border-radius a IE - proste hore a dole dáš úzky pásik na bokoch zaoblený (mám na mysli obrázok, samozrejme len pre IE)

Ber to ako konštruktívnu kritiku, keďže sám som nedávno musel tieto problémy ošetrovať ;)
0 0 Roland Dobos 3.3.2012 21:21:58
pre IE existuje alternatíva filter a -ms-filter

/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
0 0 Michal Chovanec 28.2.2012 16:09:30
nefungovalo by to na ie7 a ie8
0 0 Roland Dobos 28.2.2012 15:12:57
no vyzerá to pekne, ale čo tak celý #bg_cover nechať bokom a nastaviť box-shadow na #bg_pattern? =)
0 0 Matej Lukáč 27.2.2012 18:48:51
- Tomas, skus si precitat cely post ...
0 0 Tomas Misura 27.2.2012 09:17:22
@Matej, tu "vykopavku" pouziva este stale prilis velke percento ludi, aby sa dalo jednoducho ignorovat.
0 0 Matej Lukáč 26.2.2012 22:09:32
nevyuzivat vyhody css2/3 len koli tomu, ze "to nepodporuje" vykopavka IE7 (20.1 % z toho dIE 7 = 3.1 % - http://www.w3schools.com/browsers/browsers_explorer.asp - ) je krok spat, ked uz tak, do podmienky pre dIE 7 staci dat http://selectivizr.com/ ;)
0 0 Michal Chovanec 26.2.2012 11:21:15
lenže :before a :after nebude (bez pomoci javascriptu) fungovať na IE7
0 0 Matej Lukáč 26.2.2012 10:40:09
mne pride stale lepsie napisat jedno css, ako generovat rovanky HTML kod na kazdej stranke
0 0 Michal Chovanec 26.2.2012 04:56:15
ale zato podstatne zložitejšie css
0 0 Matej Lukáč 26.2.2012 00:15:16
http://www.nolimit.sk/works/pattern trosku menej prebytocnych class-ov ;)
0 0 Lukas Malucky 25.2.2012 12:03:57
vďaka za tip, určite to použijem
0 0 Michal Chovanec 25.2.2012 08:25:55
pravda, to zo záporným marginom ma vôbec nenapadlo, zo mňa asi Coyier nebude
0 0 František "yderf" Haško 25.2.2012 07:51:11
vyzera to rozumne. Ja by som to vsak este jemne vylepsil tym, ze by som dal prec #bg_cont s velkostou 0 a radsej dal zaporny margin pravdepodobne v patterne. Lepsie to vyjadruje to, co chces dosiahnut. Pripadne nastavit poziciu na absolutnu a ak treba, tak z-index zaporny.

Huh, asi vidno, ze sa mi vobec nepaci to height: 0; :-)
Zajtra.sk > Programovanie > CSS/HTML > Ako si pripraviť efektné prechody na pozadí


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama