Diskuze: Machr na webdesign - CSS 3 tlačítko

HTML a CSS HTML a CSS Machr na webdesign - CSS 3 tlačítko American English version English version

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Ahoj, další webová minisoutěž o placku a samolepky je tu. Tento týden je zadání velmi jednoduché: Nastylujte pomocí CSS 3 co nejhezčí tlačítko. Nejsou povolené obrázky, ale můžete použít celý arzenál CSS 3 a k tomu externí fonty.

Možných realizací jsou stovky, kulatá, hranatá, zakulacená, s různými fonty (třeba psacími), různě barevná, stínovaná, osvětlená... Pokuste se udělat tak pěkné tlačítko, na které by třeba zákazník v e-shopu velmi rád klikl a koupil si zboží zrovna u vás!

Jako u každé soutěže můžete přihlásit více tlačítek. Nebojte se tlačítko udělat větší, aby lépe vyniklo.

Deadline si dejme v neděli 9.6.2013 v 15:00.

Odpovědět  +2 3.6.2013 15:16
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
pr0m3the3us
Redaktor
Avatar
pr0m3the3us:

Tak se asi zoučastním, ať to je moje první soutěž na devbooku :) Otázka je, zda-li požaduješ pouze .css, nebo to můžu rovnou implementovat do html ? :P

Nahoru Odpovědět 3.6.2013 15:53
Teprve když vstáváte s hackingem a uléháte s myšlenkou na něj, máte šanci být hackerem
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na pr0m3the3us
David Čápka:

Ideálně i v HTML, ale stačilo by i CSS.

Nahoru Odpovědět 3.6.2013 16:02
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
matesax
Redaktor
Avatar
Odpovídá na David Čápka
matesax:

Řekl bych, že se ptá, zda akceptuješ prasekód - styly rovnou v HTML souboru...

Za sebe se ptám - co budete hodnotit?

Editováno 3.6.2013 16:41
 
Nahoru Odpovědět 3.6.2013 16:40
Avatar
Kit
Redaktor
Avatar
Odpovídá na matesax
Kit:

Styly přímo v HTML jsou prasekód? Bez tohoto "prasekódu" mi nešlo převádět HTML do office bez ztráty formátování. Takže ten "prasekód" má svůj význam.

Nahoru Odpovědět  +2 3.6.2013 16:44
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
albertpatera
Redaktor
Avatar
albertpatera:

taky se rád zúčastnim :D

 
Nahoru Odpovědět 3.6.2013 17:00
Avatar
HellCoder
Neregistrovaný
Avatar
HellCoder:

Musi to fungovat ve vsech prohlizecich nebo stacci v jednom? :)

 
Nahoru Odpovědět 3.6.2013 17:17
Avatar
matesax
Redaktor
Avatar
Odpovídá na David Čápka
matesax:

Tlačítko znamená button? Nebo jaké elementy?

 
Nahoru Odpovědět 3.6.2013 17:17
Avatar
Odpovídá na matesax
Michal Žůrek (misaz):

samozřejmě <button>, header na to asi nepoužiješ :D Jinak já ještě přidávám podporu pro input type=button.

Tento týden to bude těžké.

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

Děláš si srandu? Samozřejmé to není. Je tu input, li atd...

 
Nahoru Odpovědět 4.6.2013 6:46
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na matesax
David Čápka:

Matěji, co jsme si říkali o těch tvých nesmyslech? pr0m3the3us se normálně česky ptal, jestli chci jen CSS nebo i HTML soubor. Jestli budeš stylovat button nebo div je úplně jedno, když to bude vypadat stejně. Zkus prosím někdy přemýšlet než něco napíšeš.

Nahoru Odpovědět  +4 4.6.2013 10:12
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
matesax
Redaktor
Avatar
Odpovídá na David Čápka
matesax:

Zkus to ty - mnohé elementy se špatně editují. Takže by jsi to mohl ztížit zvolením právě takového elementu... Za další - nenapsal to jasně - opět za to viníš nepravého...

Editováno 4.6.2013 15:25
 
Nahoru Odpovědět  -8 4.6.2013 15:24
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na matesax
David Čápka:

Nepřeji si, aby jsi se tu v diskuzích nadále vyjadřoval. Nejsme zvědaví na debaty o prasekódu, otázky typu "děláš si srandu" a filosofické debaty o tom, co znamená "ostylovat tlačítko". Mrzí mě, že máš takové problémy s pochopením jednoduchých úkonů a vět, ale ostatní to obtěžuje.

Nahoru Odpovědět  +3 4.6.2013 15:31
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Kit
Redaktor
Avatar
Odpovídá na matesax
Kit:

Které elementy se špatně editují? Každý element se skládá z nějakých znaků, které na klávesnici napíšu velmi snadno.

Nahoru Odpovědět  +2 4.6.2013 15:33
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
niveses
Redaktor
Avatar
niveses:

Kam to mám poslat?

 
Nahoru Odpovědět 5.6.2013 17:04
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na niveses
Honza Bittner:

jestli myslíš soutěžní tlačítko tak to buď přímo sem, nebo to pošli sdracovi.

Nahoru Odpovědět 5.6.2013 17:07
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
niveses
Redaktor
Avatar
niveses:

Díky

 
Nahoru Odpovědět 5.6.2013 17:08
Avatar
niveses
Redaktor
Avatar
niveses:

Třeba ostatní zapomenou poslat :D

http://uloz.to/…tlacitko-zip

Editováno 5.6.2013 17:15
 
Nahoru Odpovědět  +5 5.6.2013 17:12
Avatar
David Čápka
Tým ITnetwork
Avatar
Nahoru Odpovědět  +1 5.6.2013 17:30
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Milan Gallas
Redaktor
Avatar
 
Nahoru Odpovědět  +1 6.6.2013 16:38
Avatar
Petr G
Redaktor
Avatar
Petr G:

Také se zúčastním :)
http://db.tt/qgLbc2JB

  • Testováno v Google Chromu
 
Nahoru Odpovědět  +2 6.6.2013 16:58
Avatar
niveses
Redaktor
Avatar
niveses:

A je po výhře :DD

Máte to pěkný :)

 
Nahoru Odpovědět 6.6.2013 17:28
Avatar
Vojtěch Jelínek (Slepice1):

Já mám tokové jednoduché 8-bit tlačítko.
http://ulozto.cz/…evbook-2-zip
Možná zkusím udělat ještě jedno.

 
Nahoru Odpovědět  +1 6.6.2013 19:40
Avatar
Nahoru Odpovědět  +3 7.6.2013 13:42
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
Michal Žůrek (misaz):

tobě to přeju :), tebe asi jako jediného napadlo udělát to tlačítko i viditelně zamáčknutelné.

Nevim jestli sem něco dám, jelikož nemám nápad a bez něho to prostě nejde.

Nahoru Odpovědět 7.6.2013 19:51
Nesnáším {}, proto se jim vyhýbám.
Avatar
jakub
Redaktor
Avatar
Odpovídá na David Čápka
jakub:

Takže také se zůčastním :-)
Ještě budu upravovat barvy,zatím to je toto:
http://king-of-craft.eu/index.html

Editováno 8.6.2013 8:48
Nahoru Odpovědět  +1 8.6.2013 8:47
Uvnitř jsou všichni stejní...
Avatar
Robert Zemánek (bobánek):

tady dávám svojí práci http://uloz.to/…-bobanek-rar
akorát nechápu proč, ale na 100% to funguje jenom ve chromu :/ v mozile a opeře funguje jenom něco a exploler sem ani netestoval :D

Nahoru Odpovědět  +2 8.6.2013 9:37
Jsem jako holub.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Robert Zemánek (bobánek)
Honza Bittner:

webové soutěže nám většinou stačí funkční pro chrome

Nahoru Odpovědět 8.6.2013 9:48
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Robert Zemánek (bobánek)
Honza Bittner:

Tlačítko je docela hezké, ale na web bys ho podle mě dát nemohl u 80% případů ...

Nahoru Odpovědět 8.6.2013 9:52
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Robert Zemánek (bobánek)
Michal Žůrek (misaz):

ty tam totiž podporuješ kdejaký vendor prefix, ale třeba internete explorer, většinou žádne prefixi nepotřebuje. :) Mozzila a IE kulatý rámeček již berou taky bez vendor prefixu. Kdybys opravil prefixi, funguje to všude.

Nahoru Odpovědět 8.6.2013 9:55
Nesnáším {}, proto se jim vyhýbám.
Avatar
jakub
Redaktor
Avatar
Odpovídá na David Čápka
jakub:

Ještě jsem udělal jedno na vzoru Facebooku,budu ještě přidělávat:
http://www.king-of-craft.eu/

Nahoru Odpovědět  +2 8.6.2013 9:56
Uvnitř jsou všichni stejní...
Avatar
Vojtěch Jelínek (Slepice1):

Tak tady je druhé tlačítko. Inspirace ostravským logem.
http://ulozto.cz/…-devbook-zip

 
Nahoru Odpovědět 8.6.2013 17:23
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Lidi zkuste CLOUD9 IDE :) .. můžete pak poslat vždy jen odkaz :)

Nahoru Odpovědět 8.6.2013 21:35
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Martin Horáček:

Tak tady je můj trochu jinak, trochu střeštěně pojatej výtvor.
http://www.mediafire.com/…n_na_dev.rar

 
Nahoru Odpovědět  +1 8.6.2013 21:39
Avatar
Odpovídá na Honza Bittner
Vojtěch Jelínek (Slepice1):

Já ho používám, jen jsem nastavil špatně práva.

 
Nahoru Odpovědět  +1 8.6.2013 21:56
Avatar
Ben Žour (Jeremy):

http://uloz.to/…tlacitko-rar

Symbolická pětiminutová splácanina, škoda že transition se ještě nekamarádí s přechodama 8| Testováno v Opeře, Chromu a Firefoxu.

 
Nahoru Odpovědět  +1 9.6.2013 9:35
Avatar
jakub
Redaktor
Avatar
Nahoru Odpovědět 9.6.2013 9:47
Uvnitř jsou všichni stejní...
Avatar
Michal Žůrek (misaz):

Ahoj,
nakonec tu i já přidávám moji 15ti minutovou práci. Jednoduché tlačítko v pěti různých barevných kombinacích.

http://uloz.to/…az-final-zip

případně na mojí webovce http://misaz.wz.cz/page.php?…

Nahoru Odpovědět  +1 9.6.2013 9:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Dnes budeme mít s hodnocením hodinku zpoždění. Díky za pochopení :)

Nahoru Odpovědět  +1 9.6.2013 13:22
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Svůj výtvor jsem posílal sdracovi asi ve čtvrtek a kdyby vás zajímalo jak vypadá tak je tady : https://c9.io/…o/index.html
:)

Nahoru Odpovědět 9.6.2013 16:01
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Ahoj, v dnešní soutěži vypadá pořadí následovně:

  1. HoBi(100 bodů)
  2. niveses (90 bodů)
  3. bobanek (90 bodů)
  4. girtas (85 bodů)
  5. Misaz (85 bodů)
  6. PR0M3THE3US (85 bodů)
  7. horeso66 (80 bodů)
  8. jakub (75 bodů)
  9. Slepice1 (75 bodů)
  10. full (70 bodů)
  11. Jeremy (70 bodů)
  12. Salatik (70 bodů)
  13. Slepice1 (2. tlačítko, 70 bodů)
  14. HAPPY DAY (60 bodů)

Placku si tedy odnáší Honza Bittner, které mu gratuluji. Je zvláštní, že nikoho dalšího nenapadlo udělat zasouvání animací, vypadá to opravdu dobře + nějaké ty odlesky k tomu. Účast byla obrovská, všem děkujeme že nám poslali svá tlačítka a budeme se těšit zas příští týden u nové soutěže :) Moc rád bych nejhezčí tlačítka vystavil v článku v sekci CSS, pokud to někomu ze zúčastněných nevadí :)

Nahoru Odpovědět  +4 9.6.2013 17:34
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
David Dostal
Redaktor
Avatar
Odpovídá na David Čápka
David Dostal:

Zasouvání textu jsem měl původně v plánu, proto jsem tam také měl pouze ikonu. Bohužel už jsem to nestihl. Jinak gratuluji Honza Bittner .

Editováno 9.6.2013 17:39
 
Nahoru Odpovědět  +1 9.6.2013 17:37
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět  +2 9.6.2013 17:37
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:

Blahopřeji vítězi.

 
Nahoru Odpovědět  +1 9.6.2013 18:15
Avatar
niveses
Redaktor
Avatar
niveses:

Taky gratuluji :)

 
Nahoru Odpovědět  +1 9.6.2013 18:28
Avatar
Lukáš Linhart:

Gratuluji (:

 
Nahoru Odpovědět  +1 9.6.2013 18:29
Avatar
Vojtěch Jelínek (Slepice1):

Také gratuluji.

 
Nahoru Odpovědět  +1 9.6.2013 21:52
Avatar
Michal Doubek (HAPPY DAY):

Jemu jsem to přál
Gratuluji

Nahoru Odpovědět  +1 10.6.2013 14:40
Svoboda tvé pěsti končí na špičce mého nosu
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 49 zpráv z 49.