Od vektorové grafiky až po interaktivní trojrozměrný prostor. Již nyní je možné, pomocí poslední verze CSS, vytvářet téměř jakoukoli grafiku, bez potřeby používat obrázkové prvky (kromě obrázků/fotografií samotných). Otázkou jen zůstává, jak se bude do budoucna vyvijet podpora u jednotlivých prohlížečů. Každý z velkých prohlížečů totiž zatím používá pro většinu atributů CSS3 svůj prefix nebo celý název. Zpracování a zadávání hodnot je na tom velmi podobně, a to samozřejmě znesnadňuje stylování dokumentů. Jednoduše řečeno, v každém prohlížeči je výsledný efekt více či méně odlišný. Například IE se zatím podporou CSS3 moc nepředvedlo a dokonce svou poslední verzi 9 ani nevydali pro Win XP. Stylovat pro každý prohlížeč a dopisovat kvůli němu speciální funkce sjednocující vzhled ve všech z nich je poměrně zdlouhavá práce. Proto doufejme, že se to v co nejbližší budoucnosti změní, prohlížeče začnou používat standardizované atributy a implementace bude v prohlížečích velmi podobná.
Možnosti, které nabízí CSS3, si popíšeme v dalších řádcích a zároveň se u každé z nich pokusím určit jejich podporu v různých prohlížečích (v současné době - psáno 23.srpna 2012).
Abychom šli podle abecedního řazení, začneme animacemi, kde uvedu několik metod pro tvorbu animací v CSS3 a různé zápisy pro různé prohlížeče.
Poznámka: Asi nejlepší podpora dále zmiňovaných vlastností jazyka CSS ve verzi 3 byla v Google Chrome 21.0.
Zápis CSS vlastností
Nejprve rozhodneme, jakému elementu chceme css vlastnosti přiřadit, to zapíšeme jako #id_elementu nebo .class_elementu. Pro úplné začátečníky uvedu i následující krok, kterým je označení samotné definice css. To se provádí složenými závorkami {}, do těchto závorek poté zapíšeme definici css vlastností jako je border, background, width, transition apod...
Definice stylu v závorkách pak vypadá následovně. Nejprve název vlastnosti, například background-color, pak dvojtečka : a hodnota vlastnosti black nebo zápisem barvy v šestnáctkové soustavě s prefixem # #ffffff. Název vlastnosti s její hodnotou pak ukončíme středníkem ;.
Příklad pro přiřazení podle id vypadá následovně:
#id_elementu {
nazev-vlastnosti: hodnota vlastnosti;
dalsi-vlastnost: jeji hodnota;
}
Nebo pro přiřazení třídě class:
.trida_elementu {
vlastnost: hodnota;
vlastnost: hodnota;
}
Tento zápis můžeme zapsat buďto do samostatného souboru s příponou .css nebo přímo do .html souboru. Do css souboru definici zapisujeme přímo tímto způsobem, máme tedy externí soubor s css styly a musíme ho do html souboru načítat pomocí zápisu <link rel="stylesheet" href="nas_soubor.css">. Pokud chceme css zapisovat přímo do html, musíme jej obalit tagem <style type="text/css"><!-- nejaky css styl --></style>.
Tímto jsem se pokusil vysvětlit zápis samotného CSS stylu, a teď už se konečně pustíme do popsání animací.
ANIMACE v CSS3
Animace v CSS lze vytvářet více způsoby. Především je však možné animaci přiřadit nějaký název, kterým pak můžeme animování přiřazovat pouhým zavoláním názvu.
První možnost, jak animaci vytvořit, je pomocí Transitions neboli přechodů:
Transitions
Jak jsem v úvodu popsal, problematika je zatím v zápisu pro různé prohlížeče, přičemž musíme zapsat transitions pro každý z nich a ještě připsat samotné atributy definované specifikací pro budoucí časy, kdy budou prohlížeče podporovat pouze originální vlastnost transition.
Transition vlastnosti zapisujeme přímo do css definice jednotlivých elementů, pro které chceme animaci použít.
- První vlastnost transition-property určuje, jakou vlastnost budeme animovat. Hodnota tedy může být třeba color, border. Více vlastností, které chceme animovat, oddělujeme čárkou. transition-property: width, border, left;.
- Vlastností transition-duration definujeme délku animace v sekundách. Tedy například 0.5s, 2s apod... transition-duration: 0.8s;.
- poslední vlastností je transition-timing-function, která udává, jaká funkce se má použít na výpočet průběhu animace. Možnosti jsou: ease (default) - bez hodnoty, linear, ease-in, ease-out, ease-in-out, step-start, step-end, lze definovat i vlastní, pomocí hodnoty cubic-bezier() pro průběh podle námi zadané Bézierovy křivky, nebo steps() pro zadání kroků.
Cubic-bezier(), jak udává dokumentace W3C, funguje na základě kubické Bézierovy křivky. Tedy tečnou P0-P1 a tečnou P2-P3. Souřadnice P0 jsou vždy [0,0] a P3 [1,1]. Do funkce tedy vkládáme souřadnice tečných bodů P1 a P2. cubic-bezier( 0.6 , 0.1 , 0.15 , 0.7 ).
Poslední je steps(), tedy kroky. První hodnotou je počet kroků, druhou hodnotou start nebo end, určujeme k jakému místu animace se mají kroky vypočítat.
Počet kroků nám rozdělí funkci na daný počet nespojených úseček. Například pro steps(3, start), je funkce rozdělena na tři části o 1/3 délky a první část začíná na 1/3. Tzn. po spuštění animace uběhne
Kliknutím na jednotlivé ukázky spustíte animaci.
Zde jsem popsal a ukázal na příkladu jednotlivé vlastnosti potřebné pro animaci pomocí transitions. Nyní bych rád popsal přímo aplikaci vlastností v kódu.
Pro příklad si stanovíme nějaký cíl, kterého animací chceme docílit. Například prolínání dvou obrázků po najetí myši. Začneme s HTML částí. Nadefinujeme si html dokument v nějakém editoru nebo i v klasickém poznámkovém bloku. V dokumentu použijeme asi nejspolehlivější a nejrozšířenější kódování UTF-8. Hlavička souboru pak bude vypadat takto:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Nas pokus s animací v CSS</title> <style type="text/css"> <!-- --> </style> </head> <body>
V takto připraveném dokumentu, vytvoříme párový tag "div" (označuje se <div> obsah divu </div>. Nepárový tag nevyžaduje ukončení pomocí </neco>). Divu přiřadíme atribut id s hodnotou "nas_obrazek".
<div id="nas_obrazek"></div>
Nyní si zvolme nějaké dva obrázky, které chceme prolínat. Můžete je stáhnout ze stránek pro sdílení obrázků zdarma, třeba na Fourth Dimension, nebo můžete použít nějaké dva vaše obrázky. Oba by měly mít stejné rozměry, není to ale naprosto nutné. Doporučuji velikost sjednotit ořezem v nějakém obrázkovém editoru. Aby mnou zvolený příklad fungoval i na slabších počítačích, použiji dva obrázky o rozměrech 335x223px.
Náš div si teď nastylujeme pomocí CSS a jako výchozí pozadí divu nastavíme první z obrázků. CSS budeme zapisovat přímo do html souboru mezi tagy <style><!-- --></style>. Následující kód bude tedy vypadat takto: (mezi značky /* a */ se zapisují komentáře, které nijak neovlivňují funkčnost).
#nas_obrazek { /* # označuje, že půjde o element s ID. */
position:absolute; /* Absolutní pozice divu. */
width:335px; /* Šířka divu v px (podle obrázku) */
height:223px; /* Výška divu v px (podle obrázku) */
background-image:url('http://i.iinfo.cz/images/629/kytara1.jpg'); /* url adresa obrázku, který se vloží do pozadí divu. */
}
Nyní připíšeme do #nas_obrazek ještě další vlastnosti, které umožní animaci. Jsou to vlastnosti popsané v úvodu Transitions. Je nutné zapsat vlastnosti pětkrát.
- Vlastnosti transition s prefixem -webkit- jsou pro prohlížeče pracující na enginu WebKit tedy použitém především v Chrome a Safari.
- Transitions s prefixem -o- jsou, jak už je patrné, vlastnosti pro prohlížeč Opera.
- Prefix -moz- definujeme vlastnost pro Mozillu Firefox 4. Bez prefixu, až budoucí 16.0.
- -ms- je prefix pro Internet Explorer 10, dřívější verze nepodporují myslím (téměř?) nic z CSS3. IE9 dokonce nevyšel pro Win XP. Některé stránky tvrdí o 10. verzi i to, že bude možné používat vlastnosti bez prefixu.
- Poslední se zapisuje přímo vlastnost daná specifikací tak, jak by v budoucnu měla fungovat unifikovaně pro všechny prohlížeče. Tedy bez potřeby prefixovaných vlastností pro různé prohlížeče.
Výsledná definice stylu pro #nas_obrazek bude vypadat takto:
#nas_obrazek {
position:absolute;
width:335px;
height:223px;
background-image:url('http://i.iinfo.cz/images/629/kytara1.jpg');
-webkit-transition-property: background-image; /* vlastnost kterou chceme animovat pro Chrome a Safari*/
-webkit-transition-duration: 2s; /* doba trvání animace pro Chrome a Safari*/
-webkit-transition-timing-function: linear; /* průběh animace pro Chrome a Safari*/
-o-transition-property: background-image; /* pro Operu */
-o-transition-duration: 2s;
-o-transition-timing-function: linear;
-moz-transition-property: background-image; /* pro Firefox 4*/
-moz-transition-duration: 2s;
-moz-transition-timing-function: linear;
-ms-transition-property: background-image; /* pro Firefox 4*/
-ms-transition-duration: 2s;
-ms-transition-timing-function: linear;
transition-property: background-image; /* pro budoucí podporu */
transition-duration: 2s;
transition-timing-function: linear;
}
Nyní jsem si definovali vlastnosti animace. Dále si už jen vytvoříme CSS styl, který se aktivuje při najetí na div. Do tohoto stylu zapíšeme vlastnost a její hodnotu, na kterou se má animace změnit. V našem případě napíšeme background-image: url('url druhého obrázku');. Pseudo třídou :hover vytvoříme událost, která při najetí myši na element vykoná animaci.
#nas_obrazek:hover {
background-image:url('http://i.iinfo.cz/images/354/kytara2.jpg');
}
Výsledný příklad by měl poté vypadat takto (najeďte myší):
Pro správnou funkci našeho kódu, uložte vytvořený dokument s příponou .html nebo .htm a spusťte ho v prohlížeči. (Například Google Chrome 21.0.1180.83)
Na konci tohoto dílu přiložím aktuální podporu zmiňovaných vlastností ve všech známých prohlížečích. (K aktuálnímu datu 28. srpna 2012.)
Keyframes
Keyframes animace umožňuje nadefinovat klíčové body a k těmto bodům přiřazovat, co všechno animace v daný bod udělá. Jak jsem již zmínil v úvodu, tento typ animace umožňuje pojmenování a následnou aplikaci na libovolný počet prvků. To velmi zkrátí zápis u větších projektů. Jsme ale opět nuceni provádět zápis vlastnosti pro každý prohlížeč zvlášť. Bez prefixu, -webkit-, -o- a -moz-. Samotnou vlastnost zapisujeme zavináčem, názvem vlastnosti a námi zvoleným názvem dané animace. @keyframes nase_animace. Obsah vlastnosti opět zapisujeme do složených závorek {}.
První možnost je použít předdefinované body animace from a to. Které jsou totožné s 0% a 100%. Nebo lze použít přímo procentuální označení jednotlivých klíčových bodů. 20% 40% 60% atd... Kód bude vypadat tedy takto:
@keyframes nase_animace {
from{vlastnost: hodnota;}
to{vlastnost: hodnota;}
}
Nebo pokud potřebujeme více klíčových bodů:
@keyframes nase_animace {
0%{vlastnost: hodnota;}
20%{vlastnost: hodnota;}
40%{vlastnost: hodnota;}
60%{vlastnost: hodnota;}
80%{vlastnost: hodnota;}
100%{vlastnost: hodnota;}
}
Do stylu elementu, který chceme animovat touto animací, zapíšeme tyto vlastnosti:
#id_elementu {
animation-name: nase_animace; /* název námi definované animace v předchozím kroku */
animation-duration: 3s; /* doba trvání animace */
animation-timing-function: linear; /* funkce pro průběh animace */
animation-delay: 1s; /* doba, nez se začne animace opakovat */
animation-iteration-count: infinite; /* animace bude probíhat stále dokola, pokud zadáme např. 3, animace poběží 3x */
animation-direction: alternate; /* animace se po doběhnutí spustí obráceně, pri "normal" probíhá pouze jedním směrem */
animation-play-state: running; /* animace bude probíhat, pri "paused" nebude */
}
Jako příklad bychom si mohli zkusit vytvořit třeba pohybující se loading. Podobný jako na známé sociální síti.
Nejprve si nadefinujeme elementy, které se budou animovat. Loading bude obsahovat tři obdélníky, které budou měnit velikost a barvu; všem obdélníkům přiřadíme jednotnou třídu class.
<div id="obdelnik_1" class="obdelnik"></div> <div id="obdelnik_2" class="obdelnik"></div> <div id="obdelnik_3" class="obdelnik"></div>
Nyní jednotlivé elementy loadingu nastylujeme pomocí CSS. Nejprve vytvoříme styl třídy obdelnik. Dále definujeme animaci a nakonec vytvoříme styly pro id obdelnik_1,2 a 3.
.obdelnik {
background:#CCCCCC; /* barva pozadí */
border: 1px solid #999999; /* definice rámečku */
width:20px; /* šířka */
height:40px; /* výška */
float:left; /* obtékání z leva */
margin-left:5px; /* vnější volný okraj z leva */
-webkit-animation-name:loading; /* název animace */
-webkit-animation-duration:1.3s; /* doba trvání animace */
-webkit-animation-iteration-count:infinite; /* animace probíhá ve smyšce */
-webkit-animation-direction:linear; /* funkce průběhu animace */
-webkit-transform:scale(0.91); /* velikost bude zmenšena na 0.91 => na 91% */
-moz-animation-name:loading;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(0.91);
-o-animation-name:loading;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(0.91);
-ms-animation-name:loading;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(0.91);
animation-name:loading;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(0.91);
opacity:0.1; /* viditelnost 0.1 => 10% */
}
Definice animace bude vypadat takto:
@-webkit-keyframes loading {
0%{
-webkit-transform:scale(1.2);
opacity:1;
background-color:#0066CC;
}
100%{
-webkit-transform:scale(0.7);
opacity:0.1;
background-color:#CCCCCC;
}
}
@-o-keyframes loading {
0%{
-o-transform:scale(1.2);
opacity:1;
background-color:#0066CC;
}
100%{
-o-transform:scale(0.7);
opacity:0.1;
background-color:#CCCCCC;
}
}
@-moz-keyframes loading {
0%{
-moz-transform:scale(1.2);
opacity:1;
background-color:#0066CC;
}
100%{
-moz-transform:scale(0.7);
opacity:0.1;
background-color:#CCCCCC;
}
}
@-ms-keyframes loading {
0%{
-ms-transform:scale(1.2);
opacity:1;
background-color:#0066CC;
}
100%{
-ms-transform:scale(0.7);
opacity:0.1;
background-color:#CCCCCC;
}
}
@keyframes loading {
0%{
transform:scale(1.2);
opacity:1;
background-color:#0066CC;
}
100%{
transform:scale(0.7);
opacity:0.1;
background-color:#CCCCCC;
}
}
Posledním krokem bude nastylovat samostatné obdélníky a určit jim postupné časování, aby vytvořily postupně se zvětšující efekt.
#obdelnik_1{
-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
-o-animation-delay:0.39s;
-ms-animation-delay:0.39s;
animation-delay:0.39s;
}
#obdelnik_2{
-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
-o-animation-delay:0.52s;
-ms-animation-delay:0.52s;
animation-delay:0.52s;
}
#obdelnik_3{
-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
-o-animation-delay:0.65s;
-ms-animation-delay:0.65s;
animation-delay:0.65s;
}
Pokud v tuto chvíli soubor uložíte jako .htm nebo .html, měli byste vidět takovýto výsledek:
Podpora v prohlížečích:
Transitions -
- Google Chrome 21.0.1180.83 podporuje téměř bez problému. Nutno prefixovat funkce pomocí -webkit-.
- Chrome pro Android *údajně s prefixem -webkit-.
- Opera 12.01 podporuje, ale náš první pokus s prolnutím dvou obrázků nefunguje. Pouze se obrázek po najetí změní bez prolínání. Nutno prefixovat -o-. Od verze 12.5, by měla podporovat bez prefixu. Podle dev.opera.com podporuje transitions od verze 10.05.
- Mozilla Firefox 14.0.1 nepodporuje transitions.
- Mozilla Firefox 15.0 nepodporuje transitions. Dokumentace Mozilly uvádí, že jde o experimentální funkce, které by měly být standardně podporovány ve verzi 16.0 a to bez prefixu.
- Mozilla Firefox 4.0 *údajně podporoval transitions s prefixem -moz-.
- Firefox Mobile 4.0 *údajně podporoval s prefixem -moz-. Verze 16.0 by měla podporovat také bez prefixu.
- Android Browser *údajně podporuje s prefixem -webkit-.
- Safari Mobile *údajně s prefixem -webkit-.
- MS IE 8 netuší co je CSS3.
- MS IE 9 je na tom o trochu lépe, transitions ještě bohužel neobjevil.
- MS IE 10 by měl konečně podporovat většinu CSS3 vlastností, včetně transitions s prefixem -ms-.
@Keyframes -
- Google Chrome 21.0.1180.83 podporuje. Nutno prefixovat funkce pomocí -webkit-. Občas zlobilo rozdílné časování u loading animace. Místo postupného zvětšování se obdélníky zvětšovaly ve stejnou dobu. Po vypnutí Chrome a opětovném zapnutí vše zas fungovalo.
- Chrome pro Android *údajně s prefixem -webkit-.
- Opera 12.01 Nutno prefixovat -o- funguje *údajně od verze 12.0. Od verze 12.5, by měla podporovat bez prefixu.
- Mozilla Firefox 14.0.1 Podporuje s prefixem -moz-.
- Mozilla Firefox 15.0 Podporuje s prefixem -moz-. Od verze 16.0 by měl prefix odpadnout.
- Mozilla Firefox 5.0 *údajně podporoval keyframes s prefixem -moz-.
- Firefox Mobile 5.0 *údajně podporoval s prefixem -moz-. Verze 16.0 by měla podporovat také bez prefixu.
- Android Browser *údajně podporuje s prefixem -webkit-.
- Safari 4.0 *údajně podporuje s -webkit-.
- MS IE 8 netuší co je CSS3.
- MS IE 9 nezjištěno.
- MS IE 10 *údajně by měl podporovat bez prefixu. (Moc tomu nevěřím.)
- Pokud zjistíte nějaké nové poznatky o podpoře prohlížečů, určitě reagujte.
* netestováno, zdroj developer.mozilla.org.
Doufám, že vám byl tento vyčerpávající polopatický výklad o animacích užitečný a budete se těšit na další díl. Závěrem bych jen asi zdůraznil, že technický balíček HTML5 je stále živou specifikací, kterou si doposud vývojáři prohlížečů vykládají z různých úhlů pohledu. Jsme svědky naprosté přeměny internetových možností, která ale teprve dělá první krůčky. Proto buďme trpěliví a dejme tomuto perspektivnímu dítěti čas dospět. Pokud bych si měl zahrát na proroka, odhaduji, že většina z nyní diskutovaných částí HTML5, CSS3 a ES5 bude implementována a připravena k plnému nasazení přibližně s nástupem dalších dvou nebo tří generací prohlížečů. Minimálně co se týče 2D.
ČLÁNKY DO MAILU