Skvelý vianočný pozdrav a PF 2011 - Zajtra.sk
spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Druska 21.12.2010
Hodnoť článok:
0 0

Skvelý vianočný pozdrav a PF 2011

Dnes to bude vianočné a novoročné. K týmto sviatkom u nás patrí chladné ročné obdobie, preto ho budeme štylizovať v tomto duchu: modrá, biela, sneh, cencúle, snehové vločky, presolené cesty, … Tak začnime.

Ešte vás ale upozorním, že použité obrázky sú zámerne zmenené oproti verzii, ktorú budem rozposielať rodine, priateľom a známym. Dôvod je prostý: prví to budú vidieť v plnej verzii oni. Až po sviatkoch do článku a ukážok nahráme originálne obrázky. Inak povedané, ako ukážku si pripravíme pozdrav, ktorý znázorňuje znečistené prostredie.

Zloženie

Budeme potrebovať (ale nie je vylúčené ani iné zloženie podľa preferencií tvorcu):

  • oblohu (pozadie),
  • krajinku (popredie),
  • 4 vrstvy snehových vločiek,
  • 1 strom,
  • 1 balík,
  • 1 fotku

Najprv pridáme zahrsť HTML:

<h1>
	Krásne a požehnané sviatky<br>
	Vám praje zajtra.sk
</h1>

<div id="krajinka"></div>
<div id="strom"></div><
<a href="#" id="darcek" title="Aké prekvapenie sa tu ukrýva?"></a>
<p id="fotka"></p>
<div class="vlocky v1"></div>
<div class="vlocky v2"></div>
<div class="vlocky v3"></div>
<div class="vlocky v4"></div>

Všetko zmiešame v jednom menšom HTML súbore a mali by sme získať nadpis s pozdravom a niekoľko elementov. Tie div-y asi nikoho neprekvapia, nakoľko podľa identifikátorov jasne hovoria, o akú zložku sa bude jednať. Zaujímavejšie sú elementy p a a. V podstate sa bude diať to, že ak na daný odkaz klikneme, otvorí sa fotka na nejakom zaujímavom mieste. Celé to urobíme flexibilné a nech to bude otvorené v akomkoľvek prehliadači a na akomkoľvek zariadení, malo by sa to zobraziť dobre, aby pozdrav potešil každého.

Poleva

Poleva je náročnejšia, ako zloženie, pretože obsahuje CSS, štipku CSS 3, obrázky a jQuery (na zobrazenie fotky). Najprv teda „ofarbíme“ oblohu:

body {
	background:#3591c0 url(obloha.png) repeat-x 0 bottom fixed;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	font:14px/1.3em Futura,Arial,"Helvetica CE",sans-serif;
}
body {font-size:1em;}

Obloha bude podkladom pre zvyšok sviatočného pozdravu. V pozdrave používam absolútne poziciovanie prvkov, ktoré popisujem v článku o prispôsobiteľných webových sídlach.

Obloha

Ďalším krokom bude text. Ten zasnežíme pomocou CSS 3, čo sa dobre zobrazí v prehliadačoch Firefox, Opera, Safari, Google Chrome, ktoré moji priatelia a známi používajú. Preto v tomto prípade nemyslím vôbec na Internet Explorer. Ak by som vedel, že ho niekto používa, zvolil by som inú techniku. Nadpis bude mať teda tieto vlastnosti:

h1 {
	font-weight:normal;
	top:20%;
	z-index:100;
	font-size:4em;
	color:#13505b;
	position:absolute;
	right:10%;
	left:10%;
	text-align:right;
	line-height:1.16em;
	letter-spacing:-.06em;
}

Relatívne jednotky % používam kvôli tomu, aby bol text na menších zobrazovacích plochách bližšie k ich okrajom a na väčších ďalej. Taktiež používam absolútne poziciovanie.

Zasneženie textu urobíme pomocou CSS 3 vlastnosti text-shadow a RGBA modelu:

h1 {
	text-shadow:0 -2px 0 rgba(255,255,255,.9),
				-1px -4px 4px rgba(255,255,255,.9),
				1px -4px 4px rgba(255,255,255,.9),
				0 1px 1px rgba(255,255,255,.5);
}

Písmo

Inak povedané, písmu dáme biely tieň tak, aby nebol moc priehladný, aby bol dostatočne rozostrený, a aby vytvoril dojem napadaného snehu v tom smere, ako si želáme.

Ďalším, veľmi zaujímavým krokom bude krajinka. Tá bude vždy dole (absolútne poziciovaná) a bude mať tieto vlastnosti:

#krajinka {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:200px;
	background:url(krajinka.png) repeat-x -300px 0;
	z-index:100;
}

Poloha pozadia (-300 pixlov horizontálne) je v tomto prípade čisto praktická. Ak budete robiť vlastný obrázok, táto hodnota určite bude iná. Pozadie musí byť opakovateľné v osi x-ovej, aby sa pozdrav dal zobraziť aj na veľkých zobrazovačoch.

Krajinka

Nasledujúci prvok bude strom, ktorý umiestníme pred krajinku (väčšia z-index hodnota):

#strom {
	position:absolute;
	width:258px;
	height:418px;
	left:8%;
	bottom:88px;
	background:url(strom.png) no-repeat 0 0;
	z-index:101;
}

Preto je samostatnou vrstvou, aby pri rôznej veľkosti okna prehliadača bol mierne na odlišnom mieste. Bežne si to človek ani nevšimne, ale keď meníte veľkosť okna, tak to vytvára dojem perspektívy. Naviac, ak bude perspektíva dodržaná, dojem je neuveriteľný.

Strom

Ďalším prvkom je darček, ktorý umiestnime pod strom:

#darcek {
	position:absolute;
	width:64px;
	height:64px;
	left:14%;
	bottom:88px;
	background:url(darcek.png) no-repeat 0 0;
	z-index:104;
}

Má pevné rozmery a taktiež absolútnu pozíciu v relatívnych jednotkách zľava, aby sa jeho poloha pri zmene veľkosti okna prehliadača mierne menila. Vhodnou voľbou z-index hodnoty ho dostaneme pred krajinu i strom.

Darček

Na záver prípravy polevy pridáme štyri vrstvy vločiek. Dve budú za krajinou, dve budú pred (aj pred stromom a balíkom). Najprv ale všeobecne pre každú z vrstiev:

.vlocky {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

Tým zabezpečíme, že vločky budú elementom roztiahnutým na 100% šírku i výšku okna prehliadača za každých okolností. Ostáva umiestniť do pozadia príslušné obrázky a napoziciovať ich tak, aby vytvárali dojem perspektívy pri zmene veľkosti okna:

.v1 {
	background:url(vlocky1.png) repeat 30% 150%;
	z-index:1;
}
.v2 {
	background:url(vlocky2.png) repeat 80% 170%;
	z-index:102;
}
.v3 {
	background:url(vlocky3.png) repeat 10% 110%;
	z-index:99;
}
.v4 {
	background:url(vlocky4.png) no-repeat right 160%;
	z-index:103;
}

Vločky

Pozície pozadia som nastavil tak, aby pri zmene veľkosti okna prehliadača vytvárali dojem perspektívy (vrstva najvyššie sa pohybuje najrýchlejšie). V tomto konkrétnom prípade neboli použité žiadne výpočty, skôr dojem autora. Oveľa lepšie by bolo vypočítať tieto hodnoty presne, aby bola zabezpečená skutočná perspektíva skrze vrstvy.

Týmto sme vytvorili pozdrav, ktorý bude zobraziteľný v akomkoľvek prehliadači. Aby sme mu dodali ešte trochu esencie, pridáme do kódu jQuery a fotku rozpohybujeme po kliknutí na balík jednoduchým:

$(document).ready(function(){
	$("a").click(function(event){
		$("#fotka").toggle("fast");
	});
});

Ako pozadie fotky použijeme niečo vhodné: fotku rodiny, snehuliaka alebo akýkoľvek iný obrázok, ktorým je dobré celý pozdrav osviežiť. Aby to ale nebolo všetko, pridajme aj CSS 3 animácie.

Animovaný pozdrav

Ukážme si základné použitie (budem bez ujmy na všeobecnosti zamlčovať prefixy -webkit, -moz, …) animácií. Vymyslime si dve typy sneženia. Prvý typ bude spoločný pre všetky vrstvy vločiek, druhý typ bude len pre vločky vo vrstve najvyššej a bude animovať aj nepriesvitnosť (vločky sa budú objavovať pred očami).

Prvý typ (sneženie neustále):

@keyframes 'snezenie1' {
	0% {
		background-position-y:0%;
	}
	100% {
		background-position-y:600px;
	}
}

hovorí o tom, že animovať sa bude pozícia pozadia v osi y-ovej (vertikálne) od počiatočnej polohy na hodnote nula až po koncovú polohu v hodnote 600 pixlov (zhora nadol). Ak uvažujete, prečo práve 600 pixlov, tak je to presne výška obrázka, ktorý obsahuje dané vločky, aby pri opakovanej animácii neposkakovali (vyskúšajte zmeniť túto hodnotu).

Druhý typ sneženia bude pre vločky vo vrstve najvyššej:

@keyframes 'snezenie4' {
	0% {
		background-position-y:0%;
		opacity:0;
	}
	100% {
		background-position-y:800px;
		opacity:1;
	}
}

Taktiež animuje pozadie, ako pri prvom type (vertikálne zhora nadol), no daný obrázok je vysoký 800 pixlov, preto táto hodnota v koncovom stave animácie. Naviac, animuje sa aj nepriesvitnosť od priehladnej (opacity:0) až po plnú nepriesvitnosť (opacity:1).

Ako ste si všimli, kľúčovým slovom pre definovanie animácie je keyframes so zavináčovým prefixom. Jedna sa o tzv. keyframes pravidlo, v ktorom definujeme jednotlivé sekcie animácie, ktorých spojením vznikne výsledok. Za týmto kľúčovým slovom nasleduje názov danej animácie. Toto meno sa neskôr použije na pridelenie animácie konkrétnemu elementu, ako je popísané nižšie.

Aby sa vločky začali hýbať, nastavíme im danú animáciu (jej meno), časovanie, a opakovanie:

.v1,.v2,.v3,.v4{
	animation-timing-function:linear;
	animation-name:'snezenie1';
	animation-iteration-count:infinite;
}

Časovanie je lineárne, aby padanie vločiek neskákalo. Animácia snezenie1 sa zároveň beží donekonečna (počet opakovaní). Pridajme najvyššej vrstve vločiek druhý typ animácie:

.v4{
	animation-name:'snezenie4';
	animation-duration:8s;
}

Táto animácia snezenie4 pridáva naviac aj animovanie nepriesvitnosti, ako sme opísali vyššie. Jej trvanie je nastavené na 8 sekúnd, aby sa vločky neobjavovali takmer neustále za sebou. Nekonečný cyklus sa zdedí z animácie prvého typu, ako aj lineárne časovanie. Odporúčam sa s tými hodnotami a vlastnosťami pohrať, a vyskúšať si vlastné riešenia.

Výsledok pôjde zatiaľ len v Google Chrome a Safari (áno, aj na iOS). To je stav na konci roku 2010. Ak toto čítate neskôr, zrejme animácia pôjde už aj v Opere alebo Firefoxe. Pre každú animáciu s prefixom používam aj bez prefixu kvôli tomu, že ak nejaký prehliadač implementuje plnú podporu tejto vlastnosti, tak nebude treba prepisovať pôvodné kódy, bude stačiť len vymazať už nepotrebné s prefixami. Tým sa zaručí, že animácia pôjde aj v budúcnosti v procese vylepšovania prehliadačov ich vývojármi.

Ukážka vianočného i novoročného pozdravu.

Peter Druska Peter Druska

Vyše 13 rokov som robil CSS/HTML šablóny webových sídiel ako Pokec.sk, Azet.sk a iných. Robil som vlastné iOS appky, neskôr som prešiel programovať najskôr do Starbug.eu, neskôr do Inloop.eu. Pomedzi to som učil chvíľu na gymnáziu, no odišiel som, pretože som bol myslením nekompatibilný. Po inloope som prešiel do firmy become.sk, kde mám za úlohu vybudovať oddelenie mobilného vývoja. Tomu sa teraz venujem naplno, popri tom robím aj vývoj pre iOS. Tu sme založili značku Bedots.eu.


Hodnoť článok:
0 0

2 komentáre 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 Tomas Dolezal (fb) 7.1.2011 00:00:00
v ff 3.6 nefunkcne
0 0 Juraj Jupe Petrovic (fb) 26.12.2010 00:00:00
neviem ci to je mnozstvom otvorenych tabov a programov ale na chrome mi to trosku seka...asi pri konci toho cyklu 600px, 800px...lebo chvilku to ide plynulo a potom sekne...a potom zase plynulo....ale je to velmi pekne a keby som toto hocikde na nete uvidel urcite by ma nenapadlo ze to je css3 , hned by som za tym hladal flash..
Zajtra.sk > Programovanie > CSS/HTML > Skvelý vianočný pozdrav a PF 2011


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