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
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.
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?

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

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

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 :(..

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%;

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

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 ;)
Novinky
2 rokmi
Aprílové vtípky: Výběr toho nejlepšího kolem počítačů, internetu a techniky
Výběr nejlepších aprílových vtípků 2019
2 rokmi
Fotky Google sa učia lepšie pracovať s dokumentmi
Spoločnosť Google prostredníctvom svojho účtu na sociálnej sieti Twitter oficiálne predstavila novú funkciu svojej aplikácie Fotky Google.
2 rokmi
Gmail dovoľuje naplánovať poslanie emailu neskôr
Spoločnosť Google dnes oznámila pridanie funkčnej novinky do svojej populárnej webmailovej služby Gmail, možnosť naplánovať poslanie emailu na neskôr.
3 rokmi
Používatelia Chrome začali prechádzať na nový rýchlejší Firefox, avizujú dáta Mozilly
Nový lepší a rýchlejší prehliadač Firefox 57 Quantum vyúsťuje zrejme do viac používateľov prechádzajúcich respektíve vracajúcich sa na tento prehliadač z iných prehliadačov, na osobných počítačoch aj smartfónoch.
3 rokmi
Briti dokončili kúpu SK-NIC-u. Nové .sk domény nechávajú za 8.4 eur
Predaj správcu slovenskej domény .sk, SK-NIC, bol dokončený a novým majiteľom po telekomunikačnej skupine Danubiatel, do ktorej patrí napríklad Swan a 4ka, je britská spoločnosť CentralNic.
Staršie novinky »TOP dlhšie
- 01 Farbičky v HTML a CSS, alebo? (868x)
- 02 Tiché COMBO Logitech MK295 (717x)
- 03 Kamery, cloud a bezpečnosť (703x)
- 04 Kingston uvádza 128GB verziu šifrovaného USB (687x)
- 05 Pochopte, ako vytvoriť virtuálny obchod v 6 krokoch (627x)
- Aj ty môžeš byť najčítanejší. Napíš článok »
TOP tento mesiac
- Aj ty môžeš byť najčítanejší. Napíš článok »
Nové články:
- 14.Kingston uvádza 128GB verziu šifrovaného USB
sep - 10.Tiché COMBO Logitech MK295
sep - 24.Farbičky v HTML a CSS, alebo?
aug - 23.Pochopte, ako vytvoriť virtuálny obchod v 6 krokoch
aug - 29.Kamery, cloud a bezpečnosť
jul - Viac »
- Aj ty môžeš byť najčítanejší. Napíš článok »
Pekné veci
Pekné veci
Pekné veci
Pekné veci
Posledné komentáre
- Pokiaľ používaš nejaký lepší bitmapový editor, napr. Photoshop, a chceš robiť retuše, ed...
- Veľmi dobrý článok a pre začiatočníka úplne odrazový mostík. https://ludwaismania1.blogs...
- Nova international a prima lus majú vysporiadané pravs ale aj CNN prima News
- Tv Joj nijako neobmedzuje šírenie médii, ktoré majú vysporiadané licenčné práva pre Slov...
- Nech televizie vrátia naspäť originál verzie a tie internationali nech zrušia. Každý si ...
Kritika
Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!
Reklama
Seriály zo Zajtra.sk
· Ako písať blog
· Ako sa stať PHP ninja s Yii Frameworkom
· Aplikácie pre Facebook
· CSS triky
· iOS vývojára príhody a skúsenosti
· Jednoduché programy, ktoré vám ušetria čas
· Modelovanie webového sídla
· Nauč sa CodeIgniter [HD]
· Nauč sa jQuery [HD]
· Nette PHP framework
· OOP v Javascripte
· Programujeme v Jave
· Programujeme v Lazaruse
· Programujeme v Pythone
· Robíme Eshop v ASP.NET Web Pages
· Slovenskí iOS developeri
· Webdizajn krok po kroku
· Yablkov TurboTip [HD]
Ď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