Diskuze: Machr na webdesign

Honza Bittner

Tvůrce

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 6.4.2013 20:00

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.

Michal Žůrek - misaz

Tvůrce

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

David Hartinger

Vlastník

David Hartinger:6.4.2013 19:07

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

Nahoru Odpovědět

6.4.2013 19:07

New kid back on the block with a R.I.P

Honza Bittner

Tvůrce

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.

Ondřej Spilka

Člen

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

Honza Bittner

Tvůrce

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.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:6.4.2013 21:58

Tak to bude masakr 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

Michal Žůrek - misaz

Tvůrce

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

Neaktivní uživatel

Tvůrce

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

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

Honza Bittner:7.4.2013 10:00

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

Editováno 7.4.2013 10:01

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.

David Hartinger

Vlastník

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

Drahomír Hanák

Tvůrce

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

Honza Bittner

Tvůrce

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.

Drahomír Hanák

Tvůrce

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 7.4.2013 12:57

Nahoru Odpovědět

7.4.2013 12:56

Honza Bittner

Tvůrce

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 7.4.2013 13:02

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.

Honza Bittner

Tvůrce

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.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:7.4.2013 17:14

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

Nahoru Odpovědět

7.4.2013 17:14

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:7.4.2013 17:15

ok .. udělej něco cool !

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.

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

Honza Bittner:8.4.2013 21:16

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

Editováno 8.4.2013 21:16

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.

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

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 8.4.2013 21:31

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.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:9.4.2013 12:28

To mě taky napadlo.

Nahoru Odpovědět

9.4.2013 12:28

David Hartinger

Vlastník

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

Honza Bittner

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

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 9.4.2013 12:46

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.

Michal Maršálek

Tvůrce

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

Honza Bittner

Tvůrce

Honza Bittner:9.4.2013 19:19

no .. je to zajímavé .. ale takový kó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.

Michal Maršálek

Tvůrce

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

Honza Bittner

Tvůrce

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.

Michal Maršálek

Tvůrce

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,56,0.5), takže se docílí co nejmenší velikosti souboru.

Nahoru Odpovědět

10.4.2013 20:07

Honza Bittner

Tvůrce

Honza Bittner:11.4.2013 22:56

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

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.

Michal Žůrek - misaz

Tvůrce

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

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

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.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:12.4.2013 22:29

Mě se ty kola točí na druhou stranu

Nahoru Odpovědět

12.4.2013 22:29

Neaktivní uživatelský účet

Neaktivní uživatel

Člen

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 12.4.2013 22:37

Nahoru Odpovědět

12.4.2013 22:36

Neaktivní uživatelský účet

Neaktivní uživatel

Člen

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

Neaktivní uživatel

Tvůrce

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 ), ale asi taky něco vyrobím

Nahoru Odpovědět

12.4.2013 22:58

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:12.4.2013 23:00

3x hurá !!

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.

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

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.

David Hartinger

Vlastník

David Hartinger:13.4.2013 8:57

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

Nahoru Odpovědět

13.4.2013 8:57

New kid back on the block with a R.I.P

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:13.4.2013 13:00

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

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

Je tam i takový malinký Easter egg, enjoy

Nahoru Odpovědět

13.4.2013 13:00

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:13.4.2013 13:06

dobrej "EASTER EGG" .. (šá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.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:13.4.2013 13:09

dobře ty

Nahoru Odpovědět

13.4.2013 13:09

Ben Žour

Tvůrce

Ben Žour:13.4.2013 13:26

To je geniální

Nahoru Odpovědět

13.4.2013 13:26

David Hartinger

Vlastník

David Hartinger:13.4.2013 13:46

Pecka

Nahoru Odpovědět

13.4.2013 13:46

New kid back on the block with a R.I.P

Nejčastěji vyhledáváné

Diskuze: Machr na webdesign - CSS 3 animace