css hexagon

Jay R:
Je pro tebe fakt, že se příklad nezobrazuje dobře v IE, zanedbatelný?

Reaguji na Jayho R:
Nepřipadá mi to jako dobré řešení. Je užvaněné, -webkit-užvaněné, -moz-užvaněné, -o-užvaněné a i trochu -ms-užvaněné (ale málo) a neřehledné. Na tvém místě bych si vygeneroval obrázek s oříznutím. Proč to patlat v CSS?

Reaguji na Jayho R:
„od ie 9 to funguje“
Špatně testuješ, tvá ukázka v devítce nefunguje, protože jsi vynechal několik -ms-transformů. Nebylo by těžké zařídit, aby to fungovalo i ve starších Explorerech, maticové transformace uměla už verze 5.5.

„a už vidím jak to bude každý uživatel obřezávat“
Já nenavrhoval obřízku, ale oříznutí. Vygenerovat oříznutý obrázek přeci není problém, nehledě na to, odkud se vzal. Můžeš ho ořezávat na straně serveru po dokončení uploadu. Vlk se nažere a předkožka zůstane celá.

„moc neodpovidáte na to co jsem se ptal“
Chtěl jsi lepší řešení, ne úchylnější. Má-li být okolí šestiúhelníku průhledné, tak to asi jinak nepůjde a :before ani :after ti nepomůžou. Kdyby průhledné být nemuselo a štítil by ses použít překrývající obrázek, šlo by použít vhodně propočítané bordery. V návrzích CSS 3 existují i psudoelementy pro vnitřní obsah, těmi bys mohl nahradit vnitřní <div>y, ale nepodporuje je žádný prohlížeč (což možná pro web, který děláš, není zanedbatelné).

Ano, je to dobré řešení.

Shodou událostí taky teď dělám na webu, kde se používají šestiúhelníky. O lepším řešení nevím.

Chamurappi:
„Nepřipadá mi to jako dobré řešení. Je užvaněné, -webkit-užvaněné, -moz-užvaněné, -o-užvaněné a i trochu -ms-užvaněné (ale málo) a neřehledné. “
Užvaněné? :-) Dokážeš to napsat tak, aby to fungovalo ve všech různých podporovaných prohlížečích bez toho, aby to bylo užvaněné? Nejde to, jednou už tvůrci vynalezli (bohužel) tyhle prefixy a tak to s nimi musíme chvíli vydržet. Pokud chceš vytvářet CSS animace, musíš například celý blok definovaných klíčových snímků zduplikovat pro každý prohlížeč...

Nepřehledné proč? To že jeden element otočí ve směru h. r. a druhý proti?

„Na tvém místě bych si vygeneroval obrázek s oříznutím. Proč to patlat v CSS?“

Protože někdy třeba takové polygony musí tvořit skupinu odkazů a s klikací mapou se ti nechce dělat, protože je všechno dynamické... Tento způsob se mi zdá celkem jednoduchý a efektivní, i když nefunguje moc v IE, no co, čtverec je snad taky polygon :-)

Jay R:
Dál třeba pomocí rámečku, ale nejde z toho udělat hexagonový odkaz (bude to čtverec...) a nedej Bože měnit barvu při hoveru :-)

Jay R:
Používám stejné... na některých místech ale mám i obrázky..

Reaguji na joa:
„Užvaněné? :-)“
Ano, užvaněné. Je to delší než čtyři řádky, což je na tak primitivní efekt hodně.

„Pokud chceš vytvářet CSS animace, musíš například celý blok definovaných klíčových snímků zduplikovat pro každý prohlížeč...“
Upřímně řečeno nechápu, proč by někdo měl chtít používat takovou zhůvěřilost. Pro člověka, který umí JavaScript, nepředstavují CSS animace žádnou výhodu. Je to akorát méně funkční alternativa…

„Nepřehledné proč?“
Kodér může zjevně snadno zapomenout na některý z prefixů.

„a s klikací mapou se ti nechce dělat, protože je všechno dynamické“
Já bych se raději patlal s klikací mapou než s -webkit-moz-o-ms-příšerou a můj výsledek by fungoval lépe většímu počtu návštěvníků.

„i když nefunguje moc v IE“
V Exploreru jde použít PNG a AlphaImageLoader, pak nejsou průhledné pixely prokliknutelné. Ale to je spíš taková relativně zbytečná třešinka :-)


Reaguji na Jayho R:
„ani nevím jak v php obřiznout takový tvar, prosím nedal by jsi mi nějaký návod?“
Nedal, PHP neumím. V C# bych to asi dokázal napsat. I když vlastně také zatím nevím jak, dosud jsem to nepotřeboval.
Jako další možnost, jak obrázek oříznout, se nabízí <canvas> (=> spáchat to v prohlížeči JavaScriptem), ten funguje ve více prohlížečích než transform.

Chamurappi:
„Ano, užvaněné. Je to delší než čtyři řádky, což je na tak primitivní efekt hodně.“
S klikací mapou bys taky napsal řádků ještě víc a zrušil by sis možnost možnost jednoduchého zvětšení, snadného přesouvání elementů, transformaci na jiné tvary a pro dnes hodně využívané responsivní designy bys musel vytvářet alternativu.

„Upřímně řečeno nechápu, proč by někdo měl chtít používat takovou zhůvěřilost.“
Protože nativní operace budou vždycky rychlejší, než ty, které člověk napíše.

„Je to akorát méně funkční alternativa…“
Ano, fungovat to sice nebude všude, ale třeba návštěvníci se obejdnou CSS transitions. Je třeba se taky na to dívat z jiného úhlu pohledu - uživatel má starší prohlížeč, proč ho zatěžovat animacemi? Moderní uživatelé uvidí více efektů.

„Pro člověka, který umí JavaScript“
Víme, že umíš, ale nedávej červenou aktuálním trendům (které jen tak nezmizí) webdesignu :-)

Reaguji na joa:
„zrušil by sis možnost možnost jednoduchého zvětšení“
Tam bych už použil transform a zoom. Čtyři řádky.

„Protože nativní operace budou vždycky rychlejší, než ty, které člověk napíše.“
Zanedbatelně. Nepostřehnutelně.

„uživatel má starší prohlížeč, proč ho zatěžovat animacemi?“
Protože ten starší prohlížeč je zvládá úplně stejně, jako když byl nový. Nevím, co je to za zdegenerovanou představu, že se starší prohlížeče stávají méně schopné v průběhu času. Akorát weby se vyrábějí čím dál hůř a hledají se záminky pro to, aby nemusely fungovat stoprocentně všem a všude. Kdyby CSS animace fungovaly správně v Exploreru 6, vypnul bys je snad podmíněným komentářem, aby nezdržovaly?

„Moderní uživatelé uvidí více efektů.“
Proč by měli tvůrci stránek záměrně chtít rozdílnou funkčnost napříč prohlížeči? Aby odměnili moderního uživatele? Nebo aby trápili nemoderního? Můžou použít postup, který funguje takřka všem, bez vměšování do otázek, které jim nepřísluší řešit.

„nedávej červenou aktuálním trendům (které jen tak nezmizí) webdesignu :-)“
Však ani já nezmizím :-)