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

Ernest Sawyer 6.10.2011, článok je súčasťou seriálu CSS triky
Hodnoť článok:
1 0

CSS triky 5: šikovné riešenie obrázka v pozadí + pozadie ako slideshow

Ako na obrázok v pozadí ktorý sa prispôsobí všetkým rozlíšeniam len cez CSS? A čo keby sme zašli ešte ďalej a vytvorili si na pozadí bežiacu prezentáciu takýchto obrázkov? ;)

Toto riešenie je funkčné vo všetkých prehliadačoch a je založené na viacerých CSS funkciách. Celá myšlienka je postavená na css funkcii z-index, ktorá nám určuje viditeľnosť bloku na Z osi (teda nám určuje hĺbku elementu) a relatívnej pozícii obsahu stránky.

V základe to bude vyzerať nejak takto:


Pričom v css to bude vyzerať nasledovne:

#pozadie img{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#obsah_stranky{
z-index: 20;
position:relative;
}

Obrázok v pozadí
Takto zadefinované css nám urobí autocrop (automatické prispôsobenie) pozadia. Základ je dodržať relatívne hodnoty v definícii a zafixovať pozadie na ľavý horný roh. Rovnako dôležité je definovať min-width na absolútnych 1024px (momentálne najmenšie používanie rozlíšenie monitorov) pre kompatibilitu na všetkých rozlíšeniach a prehliadačoch.

Obsah stránky
Pre korektné zobrazenie toho čo chceme dosiahnúť je nutné už len zadefinovať z-index divu s obsahom v hodnote vyššej ako 1 a nastaviť relatívnu pozíciu (ináč by sa nám obsah stránky vôbec nezobrazil)

DEMO: http://thewitcher.sk/zajtra/fix/

STIAHNÚŤ: fix_pozadie_demo.rar

Dynamické využitie

Dynamické využitie tejto koncepcie by mohlo byť celkom zaujímavé. Predstavte si, že máte 5 krásnych fotiek ktoré by sa premietali na pozadí. Stačí nám prakticky použiť obyčajný jquery slider. Ja som použil jednoduchý slider z http://jonraasch.com/blog/a-simple-jquery-slideshow

V som len aplikovali kód a princíp, ktorý je o pár riadkov vyššie, na css štýlovanie obrázkov v slideri. O princípoch slideru sa nebudem rozpisovať, to nájdete na stránke autora toho jquery zázraku ;)

#slideshow {
 position:relative;

}

#slideshow IMG {
 min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:8;
opacity:0.0;

}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;

}

#slideshow IMG.last-active {
    z-index:9;
}

#obsah_stranky{
z-index: 20;
position:relative;
}

DEMO: http://thewitcher.sk/zajtra/slide/

STIAHNÚŤ: slide.rar

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest

Ernest Sawyer Ernest Sawyer

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)


Hodnoť článok:
1 0

11 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 kaktus 12.8.2013 09:01:05
To si nikto z diskutujucich nevsimol, ze obrazky na pozadi su pri urcitom rozliseni deformovane?
0 0 Michal Pospiech 12.8.2013 02:24:33
Pokud chcete, aby background slider fungoval taky v IE, tak si CSS upravte následovně:
#slideshow IMG {
display: none;
}

#slideshow IMG.active {
display: block;
}

Výše uvedené řádky akorát přidejte. To co tam má autor článku nemazat. :-)

IE 7-9 nezvládá opacity. Dá se to sice obejít ještě jinak, ale toto je asi nejjednodušší řešení, jak to zprovoznit taky pro IE. ;-) Netestoval jsem to, takže snad vám to bude fungovat správně.
0 0 Lukáš Kubík 5.2.2012 09:33:13
to je super ide to použiť na svoju stránku veľmi vám Ďakujem
0 0 Jozef Kucera 30.11.2011 18:44:16
nevie niekto urobit nieco aby to islo aj na IE ???.. pripadne podobny navod na slide all background ??..please :-))
0 0 Michal Godis 8.11.2011 09:55:10
vsetko krasne funguje az na nestastny IE :(
0 0 Ernest Sawyer 11.10.2011 16:47:01
@zoltán: niet zač :)
0 0 Zoltán Mitlík 11.10.2011 16:37:42
tak toto sa uplne ale uplne hodi na vsetky moje "firemne" webky skoro ;) diky :)
0 0 Tomáš Stankovič 10.10.2011 09:55:09
veľmi dobre :)
0 0 Ernest Sawyer 6.10.2011 17:28:39
@andrej: rozhľad nikdy nie na škodu =) A ďakujem!
0 0 Andrej Očenáš 6.10.2011 17:25:27
pekny serial zatial...sice robim len grafiku ale rad si pozrem ako dosiahnut podobne veci. Nech nie som uplne blby :D
0 0 Matúš Jančík 6.10.2011 12:51:11
Uzitocny tip konecne po ruke :) Dik
Zajtra.sk > Programovanie > CSS/HTML > CSS triky 5: šikovné riešenie obrázka v pozadí + pozadie ako slideshow


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