Videocast: TurboTip 11 - CSS3 / jQuery fullpage background

Celostránkové pozadie - obrázok, ktorý pokryje celé pozadie a zachová si pomer strán bez ohľadu na veľkosť okna a rozlíšenie prehliadača.

720p, HD bitches!

TurboTip 11 - CSS3 / jQuery fullpage background

skús demo » stiahni kód »

Nezabudnite sa zahrať s veľkosťou okna. Pretože o to tu ide.
Čo viete, ak ste dávali pozor.
Ak nie, tak hamba.

Links:
:: css-tricks - toto som vykradol
:: kuvva - tu som vzal obrázky
:: google webfonts - tu fonty
:: modernizr - tu chýba "e"

Oh a also, ten bodkovaný background zrejme bude vo videu vyzerať divoko, tak pozor.

Vo videu používam Sublime Text 2 - pozri si môj videocast o tomto editore.

ak ma chceš podporiť, behni na yablko.sk a možno spravím nový seriál či dva:)

Sledujte yablka skrz twitter - @yablko - pre informácie o nových videách, humor, ktorý baví len jeho a občasné nervové zrútenie.

* * *

Páči sa ti Yablkov TurboTip?

Roman Hraška

Robí s webom a občas o tom napíše. Nekomplikuje jednoduché a snaží sa neznieť príliš dôležito, pretože nie je. Medzi jeho záľuby patria jeho záľuby a tautológia. Nájdeš ho na brm.sk a obsmŕda aj na twitteri, ako @yablko.

Skús moje seriály: Nauč sa jQuery, Nauč sa CodeIgniter a Yablkov TurboTip. Ak ma chceš dohnať k tvorbe nových seriálov, behni na yablko.sk :)

Hodnoť článok:
1 0

17 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:

0 0 Vlado Tino 16.4.2013 07:53:12
Ďakujem za video. Čo poviete na toto riešenie? http://css-tricks.com/perfect-full-page-background-image/. Prajem Vám všetko dobré. Vážim si Vaše vedomosti a šikovnosť. Bluesman

0 0 viťo 19.1.2012 14:31:30
zoltan: ja viem :) ale veci tak nefunguju, ze ukaz mi.. nauc sa

0 0 Adam Kabac 19.1.2012 14:12:55
Stepan Bujnak: mne strašne pripomína moju slovinárku :D nie žeby mala rovnaký hlas, ale podobné slová a podobný typ vysvetľovania :D Tak si vždy tak predstavím že mi to vysvetľuje ona :D divné :D

0 0 JaJo Jaj 19.1.2012 11:04:56
viktor: ešte kebyže to vieš... že

0 0 Roman Hraška 19.1.2012 11:03:28
na Irisha sa nechytám, on je kráľ:)
ale dík, silný kompliment:)

0 0 Stepan Bujnak 19.1.2012 07:37:00
Hotovy Paul Irish :D Este aj hlas mas podobny.

0 0 Jozef Kucera 16.1.2012 18:24:49
Super..vdaka za tutorial.. este by to chcelo skombinovat: "slide" + ovladacie prvky :D...take tu uz je ale je to clasika bg: cover a nefunguje to v IE :(..

0 0 viťo 16.1.2012 17:09:32
ako.. ako.. skusaj

0 0 Matúš Koprda 16.1.2012 17:02:57
y: thx, to vysvetľuje mnohé
viktor: ale ako, ty lolo? :)

0 0 viťo 16.1.2012 17:00:31
vsetko sa da... aj title stranky sa da nastylovat ;)

0 0 Adam Kabac 16.1.2012 16:02:11
Hm mňa napadá že Viktor to možno myslel tak že: hodiť obrázok cez html, nastaviť mu tam width a hight na 100%, z-indexom ho hodiť aby bol niečo ako background, inač neviem ako by sa to dalo :) ...

ale inač fajn tutorial :) ja miesto toho cover račej dávam background-size: 100%;

0 0 Roman Hraška 16.1.2012 13:54:25
aale zrejme vymyslí niečo, čo si nezachová pomer strán
ale on tu predsa nie je na to, aby pomáhal
on je na to, aby zbytočne zdrbával;)

ad html vs body: http://phrogz.net/css/htmlvsbody.html

0 0 Matúš Koprda 16.1.2012 13:32:24
Jaj ty rebel! :) A je to valídne? Ja som vždy bral <body> za ten základný DOM element a <html> iba ako časť markupu.

btw tiež by ma zaujímalo ako to Viktor porieši len s CSS2 ;)

0 0 Roman Hraška 16.1.2012 13:10:51
body je už taký otrepaný:)

0 0 Matúš Koprda 16.1.2012 11:07:37
Aké máš pekné hodiny na ploche :)
A prečo HTML a nie body?

0 0 Michal Hadár 16.1.2012 11:00:48
Viktor, a podelis sa s nami o tvoje riesenie? :)

0 0 viťo 16.1.2012 10:32:01
netusim, preco na takuto vec treba css3 a jquery, ked to ide aj s css2 :)

Zajtra.sk > Programovanie > Seriály > Videocast: TurboTip 11 - CSS3 / jQuery fullpage background