Diskuze: Machr na webdesign - CSS android

HTML a CSS HTML a CSS Machr na webdesign - CSS android American English version English version

Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:

Ahoj, po nějaké době si v další soutěži procvičíte CSS3. Vaším úkolem bude pomocí CSS (bez obrázků) vytvořit Android robota (podle obrázku níže). Aby to ale nebylo tak jednoduché, přidáte i animaci. Stačí nějaké změny barev, pokročilejší mohou robota rozpohybovat.

Hodnotit budu podobnost vzorovému obrázku, nápad (u animace), kód a celkový dojem.

Čas si dáme trochu delší (přeci jen jsou prázdniny), a to do neděle 20.7.2014 do 23:00. Vyhodnocení by mělo být následující pondělí.

Kompletní pravidla soutěží: http://www.itnetwork.cz/…outezi-machr

Pozn.: Prosím odevzdávejte to v zazipované složce, ať to nemusím rozbalovat nějakou webovou službou

Odpovědět  +1 9.7.2014 21:06
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:

Ještě placky:

Nahoru Odpovědět 9.7.2014 21:08
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Zdeněk Pavlátka
Zdeněk Pavlátka:

A vzorový obrázek:

Pozn.: jednotlivě ty obrázky posílám proto, že jsem na tabletu a nejde mi vybrat víc souborů

Nahoru Odpovědět  +1 9.7.2014 21:09
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
albertpatera:

Nikde nevidim ten obrázek ;-) :-)

//sorry, postnul jsem to pozdě :D

Editováno 9.7.2014 21:12
 
Nahoru Odpovědět  +1 9.7.2014 21:11
Avatar
Kejmou
Člen
Avatar
Odpovídá na Zdeněk Pavlátka
Kejmou:

Androidáka už mám nakodovanýho, jen poladit animace a je hotovo..:)

 
Nahoru Odpovědět  +1 9.7.2014 23:29
Avatar
Michal Žůrek (misaz):

Ahoj,
oddychem od geekwork a po delší době se zapojuji do machra. Moje řešení je rozděleno do dvou CSS souborů aby bylo znovupoužitelné. android.css obsahuje androida a jeho animace a ten zbytek už to nějak implementuje do stránek. Ve simple-android.html jsou nějaké ukázky a v index.html je pak ukázka v praxi. Je to testované v IE, chrome a firefoxu, bohužel firefox jaksi znásilňuje trampolínu. Co nadělám, prostě v mozille asi nečekali, že by někdo animoval border...

Download: http://misaz.moxo.cz/…tyden-27.zip
Online: http://misaz.moxo.cz/…k/machr1427/

Nahoru Odpovědět  +4 12.7.2014 21:43
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Žůrek (misaz):

a ještě jsem zapomněl na obrázek...

Nahoru Odpovědět 12.7.2014 21:45
Nesnáším {}, proto se jim vyhýbám.
Avatar
Kejmou
Člen
Avatar
Kejmou:

No, tak to radči svůj výtvor posílat nebudu, nemělo by to cenu.

 
Nahoru Odpovědět 12.7.2014 21:49
Avatar
Odpovídá na Kejmou
Michal Žůrek (misaz):

pošli ať to vypadá, jak to vypadá.

Nahoru Odpovědět  +1 12.7.2014 21:53
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Žůrek (misaz):

mimochodem neexistuje placka Machr na Android?

David Čápka

Nahoru Odpovědět 12.7.2014 21:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
Ondrca:

Tenhle týden jenom jeden machr?

Nahoru Odpovědět 12.7.2014 22:31
Zase jsem o něco chytřejší
Avatar
KlimiCZ
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
KlimiCZ:

Existuje koukni se do pravidel je to tam na obrazku

Nahoru Odpovědět 12.7.2014 22:35
Nesnaž se zakrýt něco, co jsi provedl úmyslně. Svět je tak malý, že dotyčný se to stejně dozví.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Hej, také něco udělám, haha... :D

Nahoru Odpovědět  +1 12.7.2014 22:42
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Honza Bittner
Ondrca:

Ten smích nezní dobře, tebe něco napadlo, viď? :D

Nahoru Odpovědět 12.7.2014 22:45
Zase jsem o něco chytřejší
Avatar

Člen
Avatar
Odpovídá na Zdeněk Pavlátka
:

Efekty můžou být v js?

 
Nahoru Odpovědět 12.7.2014 22:58
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na
Honza Bittner:

IMHO ne, je to pouze CSS3.

Nahoru Odpovědět 12.7.2014 23:08
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Nahoru Odpovědět 13.7.2014 7:30
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Pavlátka:

Existuje, ale já jí aktuálně nemám (a David také ne).

Nahoru Odpovědět 13.7.2014 7:30
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Michal Žůrek (misaz):

no já jsem použil JS aby mi to roztáhl přes celou obrazovku a přesto zachoval poměr stran, vadí to?

Nahoru Odpovědět 13.7.2014 10:32
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
Avatar
PiskotPiskotovic:

Jaksi mi blbnou ruce. Když jednu nad div s classem "telo", a druhou pod něj, smuchlá se to dohromady. Takže už fakt nevim, skončil jsem dost brzo. :/

Nahoru Odpovědět 14.7.2014 18:20
Error 404 - stránka motto.php nenalezena.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Nahoru Odpovědět 14.7.2014 18:38
Error 404 - stránka motto.php nenalezena.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
PiskotPiskotovic:

Jak jste udělali ten půlkruh ? (hlava androida)

Nahoru Odpovědět 14.7.2014 18:56
Error 404 - stránka motto.php nenalezena.
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek (misaz):

stáhni si třeba můj zdroják a podívej se :)

Nahoru Odpovědět 14.7.2014 18:57
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
PiskotPiskotovic:

To jsem se díval ... udělalo mi to čtvrtovál :D Jinak týden budu pryč takže pokud nebudu odpovídat tak víš proč ... Den mi ještě na úkol zbyde :) mám to hotový, jen ta hlava mi chybí + Nedaří se mi to dát nad zbytek končetin androidíka

Editováno 14.7.2014 19:25
Nahoru Odpovědět 14.7.2014 19:25
Error 404 - stránka motto.php nenalezena.
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek (misaz):

čtvrt ovál vznikne, když nastavíš odlišnou šířku a výšku.

http://jsfiddle.net/sGk5L/

Editováno 14.7.2014 19:29
Nahoru Odpovědět 14.7.2014 19:26
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
PiskotPiskotovic:

BTW, já ale myslel, jak udělat půl ovál ... Děkuji za snahu, můj problém to nevyřešilo

Editováno 14.7.2014 19:32
Nahoru Odpovědět 14.7.2014 19:29
Error 404 - stránka motto.php nenalezena.
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek (misaz):

jak nastavíš už si vyřeš sám, editací jsem doplnil odkaz na jsfidle kde demonstruji čtvrt-kruh a čtvrt-ovál.

Nahoru Odpovědět 14.7.2014 19:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

HEj, to nestihnu, jedu na tábor. :D

Nahoru Odpovědět  ±0 14.7.2014 19:31
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Nahoru Odpovědět  +1 14.7.2014 19:32
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na Honza Bittner
PiskotPiskotovic:

Ne, to tě nemusí zajímat ...

Nahoru Odpovědět 14.7.2014 19:37
Error 404 - stránka motto.php nenalezena.
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek (misaz):

půl ovál nijak, musíš použít dva čtvrt-kruhy.

Editováno 14.7.2014 19:39
Nahoru Odpovědět  -1 14.7.2014 19:37
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Pavlátka:

Tomu dej pevnou velikost, js tam nechci.

Nahoru Odpovědět 14.7.2014 21:15
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek (misaz):

fajn, tady je verze bez JS.

Download: http://misaz.moxo.cz/…ithou-js.zip
Online: zůstává verze s JS

Nahoru Odpovědět  +1 14.7.2014 21:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Pavlátka:

Promiň za i--, překlep na tabletu ;[

Nahoru Odpovědět 14.7.2014 21:57
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Žůrek (misaz):

můžu znát řešení toho kdo mi to omínuskoval?

Nahoru Odpovědět  -3 14.7.2014 22:42
Nesnáším {}, proto se jim vyhýbám.
Avatar
qwertyW
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
qwertyW:

neměl by ten prostřední droid z čistě fyzikální pohledu i při točení padat dolů, takhle to vypadá že se zasekne ve vzduchu, otočí se a pak až spadne :)

Editováno 14.7.2014 22:48
Nahoru Odpovědět 14.7.2014 22:47
Programuji, tedy jsem.
Avatar
Odpovídá na qwertyW
Jakub Vaněk (Bubavanek):

Z čistě fyzikálního pohledu nemusí, pokud by se otáčel opravdu rychle, stihne se otočit v nejvyšším bodě, tudíž by vypadal jako že visí ve vzduchu. Snad jsem to napsal nějak pochopitelně :D

 
Nahoru Odpovědět  +1 14.7.2014 22:59
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Zdeněk Pavlátka
Zdeněk Pavlátka:

Bohužel musím zkrátit čas na tvorbu, v sobotu odjíždím, takže soutěž končí v pátek 18.7.2014 v 10:00 ráno.

Editováno 15.7.2014 6:56
Nahoru Odpovědět 15.7.2014 6:53
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Martin
Člen
Avatar
Odpovídá na Zdeněk Pavlátka
Martin:

tak taky jeden pokus
http://www.zikma.com/Martin.zip

Editováno 16.7.2014 9:45
Nahoru Odpovědět 16.7.2014 9:43
Je jedno co děláš, ale záleží jak dobře to umíš prodat.
Avatar
DHPICO
Redaktor
Avatar
Nahoru Odpovědět 18.7.2014 0:01
Požehnáni budíš oráj
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:

Tak konečně hodnocení.

Martin :
Kód není špatný, animace je rozhodně zajímavá, celkem mě pobavila. Pro funkčnost jsem ale musel připsat prefixy. A místo from a to používej 0% a 100%.

Ondrca :
Kód krásný, všude prefixy, asi takhle jsem si to představoval. Sice úplně nechápu smysl animace ale to tady není podstatné.

Misaz :
Animace krásná, kód skvělý, nemám co dodat.

DHPICO :
Animace není nic moc. Kód není špatný, ale CSS patří do samostatného souboru.
pozn.: odevzdávat se má v .zip , ne v .rar

Q++ :
Uznal jsem ti to, ale porušil jsi hned 3 pravidla - na uloz.to to nemá co dělat, odevzdávat se má .zip pojmenovaný podle tvé přezdívky. Měl by sis ta pravidla přečíst.
CSS by mělo být ve zvláštním souboru, animace žádná, jen změna pozadí při najetí myší.

Nejlépe dopadl Michal Žůrek (misaz) , který získává placku. Ondrcovo dílo bylo také moc pěkné, ale přeci jen ne tak propracované. Michal Žůrek (misaz) svůj výtvor publikuj a do PM mi napiš adresu, kam ti mám placku poslat.

Nahoru Odpovědět 18.7.2014 19:55
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek (misaz):

1.) můj kód by se dal zlepšit
2.) čekal jsem že tak primitivní obrázek přetransformujte s přesností na jeden pixel (ok na 2, kvůli ztrátové kompresi originálu), tutoriál který napíšu si rozhodně přečtěte, vysvětlím jak to okopírovat dokonale a přidám nějaké tipy k CSS.

Publikuji to (protože můj čas = 0, tak nevím kdy), placku jednou mám a 2× ji nepotřebuji.

Nahoru Odpovědět 18.7.2014 20:26
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Pavlátka:

Zlepšit by se urcitě dal, ale v porovnání s ostatními je krásný.

Nahoru Odpovědět 18.7.2014 20:42
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Michal Žůrek (misaz):

mohl bych vidět výtvor Ondrca ?

Nahoru Odpovědět 18.7.2014 21:33
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět  +3 18.7.2014 22:00
Zase jsem o něco chytřejší
Avatar
PiskotPiskotovic
Redaktor
Avatar
PiskotPiskotovic:

Už by jste mohli udělat dalšího machra ... ;)

Nahoru Odpovědět 28.7.2014 10:29
Error 404 - stránka motto.php nenalezena.
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek (misaz):

Zdeněk Pavlátka psal, že někam jel, takže bude asi pauza.

Nahoru Odpovědět 28.7.2014 10:35
Nesnáším {}, proto se jim vyhýbám.
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 47 zpráv z 47.