NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Nejnovější komentáře jsou na konci poslední stránky.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:6.4.2013 19:00

Ahoj, tento týden se bude jako minule konat machr na CSS. Nyní se však budeme zabývat animacemi. Jako vždy se jedná o týdenní minisoutěž, kde nejlepší získá placku "Machr na webdesign" a pár samolepek.

Povolenými jazyky jsou pouze HTML a CSS.

Úkolem bude vytvořit jakoukoli nejlepší animaci, která vás napadne. Můžete vytvořit například hýbajícího panáčka, hvězdnou soustavu, úvodní text ze Star Wars, nějaké zvířátko atp.

NEMŮŽETE používat obrázky, videa a javascript.
MŮŽETE používat externí fonty, zvuky atp.

Představivosti se meze nekladou. Takže buďte originální a překvapte nás :)
Bude nám stačit aby byl výsledek funkční pro nový chrome.
Přeji všem hodně štěstí :)

Pár ukázek možných výtvorů :
https://developer.mozilla.org/…bbles/launch
http://neography.com/…solarsystem/
http://michalbe.github.io/css-nyan-cat/

Jak dělat v CSS 3 animace a transformace je popsáno v těchto článcích:

http://www.itnetwork.cz/…cesky-manual
http://www.itnetwork.cz/…cesky-manual
http://www.itnetwork.cz/…cesky-manual

Deadline je v sobotu 13.4. v 19:00

Editováno
Odpovědět
6.4.2013 19:00
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:6.4.2013 19:06

Musí to být jen z jednoho divu?

 
Nahoru Odpovědět
6.4.2013 19:06
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:6.4.2013 19:07

Divů si tam udělej klidně celou říši i s Alenkou :P

Nahoru Odpovědět
6.4.2013 19:07
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:6.4.2013 19:26

Jsem celkem zvědavý co kdo vymyslí a udělá :)

Nahoru Odpovědět
6.4.2013 19:26
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Ondřej Spilka
Člen
Avatar
Ondřej Spilka:6.4.2013 20:15

Tak to přeji hodně štěstí, ale toto nebude pro začátečníky no :)

 
Nahoru Odpovědět
6.4.2013 20:15
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Ondřej Spilka
Honza Bittner:6.4.2013 20:17

proč by nebylo ? :) ..

není důležité udělat profi animaci ...
snaha je také důležitá ... :)

Nahoru Odpovědět
6.4.2013 20:17
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:6.4.2013 21:58

Tak to bude masakr :D Jsem na to zvědavej, zítra na to mrknu ;) CSS začalo být konečně trochu živý, hned se s tím dají dělat věci, už to nějakou dobu není jenom fajnovost k nastavení barviček, okrajů a velikostí :)

Nahoru Odpovědět
6.4.2013 21:58
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:7.4.2013 8:32

Teď je to taková srandička, že když chceš něco živýho nastavit musíš to napsat na 5 řádků.:

background-image:linear-gradient(right, yellowgreen 10%, #2B9322 90%);
background-image:-webkit-linear-gradient(right, yellowgreen 10%, #2B9322 90%);
background-image:-ms-linear-gradient(right, yellowgreen 10%, #2B9322 90%);
background-image:-moz-linear-gradient(right, yellowgreen 10%, #2B9322 90%);
background-image:-o-linear-gradient(right, yellowgreen 10%, #2B9322 90%);
 
Nahoru Odpovědět
7.4.2013 8:32
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:7.4.2013 8:53

Kdyby se frajeři dohodli třeba jenom na webkitu, nebo na něčem úplně jiným, tak by se nemuseli řešit takový krávoviny :)

Nahoru Odpovědět
7.4.2013 8:53
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:7.4.2013 8:58

A představ si že další nesmysly ještě přibydou:
http://www.zive.cz/…default.aspx
http://www.zive.cz/…default.aspx

 
Nahoru Odpovědět
7.4.2013 8:58
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:7.4.2013 10:00

v zadání je napsáno že stačí funkčnost pro nový CHROME.. :)

Editováno
Nahoru Odpovědět
7.4.2013 10:00
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:7.4.2013 10:07

Tyto prefixy zmizí až bude dokončena CSS 3 specifikace, není to dáno počtem prohlížečů, ale tím, že to není finální. Některé prefixy již zmizely, např. border radius. V této soutěži stačí použít jen prefix pro Chrome.

Nahoru Odpovědět
7.4.2013 10:07
New kid back on the block with a R.I.P
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Drahomír Hanák:7.4.2013 12:38

Tyhle prefixy mají svůj význam, jak říká sdraco, a těžko přinutíš třeba Microsoft, aby používal prefix Webkit :) Můžeme být ještě rádi, že jsou ty prefixy stejné alespoň v rámci prohlížečů .

 
Nahoru Odpovědět
7.4.2013 12:38
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:7.4.2013 12:49

zapojíš se do soutěže ? ;)

Nahoru Odpovědět
7.4.2013 12:49
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na Honza Bittner
Drahomír Hanák:7.4.2013 12:56

Možná jo. Uvidím ještě podle toho, jak to budu stíhat s práci. Mohl bych dát dohromady něco v sobotu ráno.

EDIT: Je povoleno JavaScriptem spouštět zvuk, nebo jen přes HTML?

Editováno
 
Nahoru Odpovědět
7.4.2013 12:56
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:7.4.2013 13:02

Pro tuto soutěž není JS povoleno ..

Má to být soutěž na CSS 3 animace a nebylo by to fér, protože tu nějací soutěžící JS neumí .. :)

Třeba v příští soutěži .. ;)

Editováno
Nahoru Odpovědět
7.4.2013 13:02
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:7.4.2013 15:22

tak co ... děláš něco ?? ;)

Nahoru Odpovědět
7.4.2013 15:22
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:7.4.2013 17:14

Spíš se dívám ze zajímavosti jak se to dělá :D Ve škole se budu nudit, tam něco vytvořím :)

Nahoru Odpovědět
7.4.2013 17:14
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:7.4.2013 17:15

ok :P .. udělej něco cool ! :D

Nahoru Odpovědět
7.4.2013 17:15
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:8.4.2013 21:13

Tak už na tom dělám a nejvíc mě štve, že nemůžu použít obrázky...

 
Nahoru Odpovědět
8.4.2013 21:13
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:8.4.2013 21:16

všechno se dá nahradit ;) .. můžeš zkusit pixelovou grafiku

Editováno
Nahoru Odpovědět
8.4.2013 21:16
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:8.4.2013 21:23

Zatím zkouším miliardu obarvených divů s jinými velikostmi...

 
Nahoru Odpovědět
8.4.2013 21:23
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:8.4.2013 21:30
:)

Poradím ti. Když si uděláš seznam který bude znázorňovat nějaký obrázek (např. mário atp.) tak si do něj udělej položky kolik potřebuješ, vhodně to ostyluj a pak když hýbáš pouze s celým seznamem (ul) tak se obrázek nerozhodí. Tudíš můžeš toto použít jako částečnou náhradu obrázků :)

Myslím že toto bude dost dobrá soutěž, jelikož musíš zapojit několik faktorů, jako jsou originalita, úmění(smysl pro design), umět html a hlavně css, abys uspěl.

Docela jsem zvědavý na výsledky a myslím že nejsem sám :)

Editováno
Nahoru Odpovědět
8.4.2013 21:30
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:9.4.2013 12:28

To mě taky napadlo.

 
Nahoru Odpovědět
9.4.2013 12:28
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:9.4.2013 12:30

Pomocí border-radius uděláš jednoduše kruhy. Z kruhů a obdélníků se toho dá složit docela hodně i bez použití obrázků :)

Nahoru Odpovědět
9.4.2013 12:30
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
Honza Bittner:9.4.2013 12:35

když k tomu přidáš možnost tvorby trojúhelníků tak je vše ještě lepší ;)

Nahoru Odpovědět
9.4.2013 12:35
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:9.4.2013 12:42

Ty trojúhelníky jsou úžasné. To se mi hodně líbí. Teprve teď však vidím jejich použití.

 
Nahoru Odpovědět
9.4.2013 12:42
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:9.4.2013 12:44

jj:) .. kdybys ty nebo někdo jiný potřeboval tak :

http://apps.eky.hk/…e-generator/

jde pak použít 1,2,3,4 trojuhelniky z toho čtverce či obdélníku .. jen změnit barvu ;)

Kdyby někdo nevěděl podle čeho se ty trojúhelníky dělají tak to jsou těžnice (ze středu strany do protějšího vrcholu)

Editováno
Nahoru Odpovědět
9.4.2013 12:44
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Maršálek
Tvůrce
Avatar
Michal Maršálek:9.4.2013 19:13

Ahoj, vytvořil jsem konvertor klasického obrázku do css zpracování pixel po pixelu. Je to použitelné jen pro přiměřeně velké soubory, protože pak vznikají vskutku obrovské soubory css - ten má vysokou úroveň redundance. Stačí tam jen zkopírovat adresu nějakého obrázku nalezeného třeba googlem.
http://finty.8u.cz/picture2css/

 
Nahoru Odpovědět
9.4.2013 19:13
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:9.4.2013 19:19

no .. je to zajímavé :) .. ale takový kód :D

zajímavé jak se to dělá přes stíny :)

Nahoru Odpovědět
9.4.2013 19:19
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Maršálek
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Maršálek:9.4.2013 19:34

No jo no...u fotky se velikost zvětší asi 100 krát u obrázku asi 1000 krát. Běžně samozřejmě není důvod něco takového používat, ale když je to zakázané... ;) Chtěl jsem ukázat, že pomocí css lze nahradit nejen jednoduché tvary ale i složitější obrázky či dokonce fotky.

 
Nahoru Odpovědět
9.4.2013 19:34
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:10.4.2013 11:30

snad se to někomu bude hodit ;)

Nahoru Odpovědět
10.4.2013 11:30
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Maršálek
Tvůrce
Avatar
Odpovídá na Michal Maršálek
Michal Maršálek:10.4.2013 20:07

Přidal jsem podporu průhlednosti - když je průhlednost daného bodu 100% nezapíše se vůbec, když je 0% použije se zápis #7d6e51 a když je něco mezi, použije se rgba(245,43,5­6,0.5), takže se docílí co nejmenší velikosti souboru.

 
Nahoru Odpovědět
10.4.2013 20:07
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:11.4.2013 22:56

No tak co kluci(holky ?) ... ? Jakto že ještě nikdo nic neposlal ? :P

Poslední 2 dny do konce soutěže !! :)

Nahoru Odpovědět
11.4.2013 22:56
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:12.4.2013 6:24

Já to se to pokusím dneska dokončit. Musím to ještě správně rozpohybovat.

 
Nahoru Odpovědět
12.4.2013 6:24
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:12.4.2013 21:48

Tak já jsem hotový.:
http://uloz.to/…eleznice-zip

Toto je snad můj nejdelší zdroják. Má "jen" 2741 řádků kódu.
Exluzivně pro David Hartinger tam je alenka.

Nezbývá opět doufat, že nás bude málo...

 
Nahoru Odpovědět
12.4.2013 21:48
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:12.4.2013 22:14

já doufám že bude hodně ;)

Nahoru Odpovědět
12.4.2013 22:14
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Neaktivní uživatel:12.4.2013 22:29

Mě se ty kola točí na druhou stranu :D

Nahoru Odpovědět
12.4.2013 22:29
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:12.4.2013 22:36

Misaz ty si prostě pán. Dám sem za chvíli i můj výtvor, ale jenom proto aby byla vidět moje snaha, výhru máš ty.

Editováno
Nahoru Odpovědět
12.4.2013 22:36
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:12.4.2013 22:39

Tak tady to je: http://uloz.to/…soutezni-zip

Nahoru Odpovědět
12.4.2013 22:39
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:12.4.2013 22:58

Dobře, moc se mi nechtělo (ne že by se mi chtělo o něco víc než jsem viděl Misazův přepis Starýho Zákona do CSS :D), ale asi taky něco vyrobím :D

Nahoru Odpovědět
12.4.2013 22:58
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:12.4.2013 23:00

3x hurá !! :D

Nahoru Odpovědět
12.4.2013 23:00
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:13.4.2013 8:21

Na těch kolech si myslím je podstatnější, že nevypadají jako kola, ale jako brambory. :(

Je opravdu možné že se točí na druhou stranu...

 
Nahoru Odpovědět
13.4.2013 8:21
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:13.4.2013 8:46

máš to dobré ... jen bys mohl přidat hudbu :)

Nahoru Odpovědět
13.4.2013 8:46
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Michal Žůrek - misaz
David Hartinger:13.4.2013 8:57

Je to moc pěkný, jen mě zabily ty kola :D

Nahoru Odpovědět
13.4.2013 8:57
New kid back on the block with a R.I.P
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:13.4.2013 13:00

Tak tady je moje animace, spíš ze srandy než abych vyhrál :D

Ukázka:
http://funebrak.hys.cz/…/CSSanimace/
Ke stažení:
http://uloz.to/…outezcss-rar

Je tam i takový malinký Easter egg, enjoy :D

Nahoru Odpovědět
13.4.2013 13:00
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:13.4.2013 13:06

dobrej "EASTER EGG" .. :D (šáhněte na hruď postavičce)

Nahoru Odpovědět
13.4.2013 13:06
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:13.4.2013 13:09

dobře ty

 
Nahoru Odpovědět
13.4.2013 13:09
Avatar
Ben Žour
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Ben Žour:13.4.2013 13:26

To je geniální :D

 
Nahoru Odpovědět
13.4.2013 13:26
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Neaktivní uživatel
David Hartinger:13.4.2013 13:46

:D Pecka

Nahoru Odpovědět
13.4.2013 13:46
New kid back on the block with a R.I.P
Nejnovější komentáře jsou na konci poslední stránky.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 50 zpráv z 67.